JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<div id="demo" class="scroll-text">
  <ul>
    <li><a href="" target="_blank">DEA Mines 1</a></li>
    <li><a href="" target="_blank">DEA Mines 2</a></li>
    <li><a href="" target="_blank">DEA Mines 3</a></li>
    <li><a href="" target="_blank">DEA Mines 4</a></li>
    <li><a href="" target="_blank">DEA Mines 5</a></li>
    <li><a href="" target="_blank">DEA Mines 6</a></li>
    <li><a href="" target="_blank">DEA Mines 7</a></li>
    <li><a href="" target="_blank">DEA Mines 8</a></li>
    <li><a href="" target="_blank">DEA Mines 9</a></li>
    <li><a href="" target="_blank">DEA Mines 10</a></li>
    <li><a href="" target="_blank">DEA Mines 11</a></li>
    <li><a href="" target="_blank">DEA Mines 12</a></li>
    <li><a href="" target="_blank">DEA Mines 13</a></li>
    <li><a href="" target="_blank">DEA Mines 14</a></li>
    <li><a href="" target="_blank">DEA Mines 15</a></li>
    <li><a href="" target="_blank">DEA Mines 16</a></li>
    <li><a href="" target="_blank">DEA Mines 17</a></li>
    <li><a href="" target="_blank">DEA Mines 18</a></li>
    <li><a href="" target="_blank">DEA Mines 19</a></li>
    <li><a href="" target="_blank">DEA Mines 20</a></li>
  </ul>
</div>
<span class="marquee">></span> /
<span class="speed_boost">></span> /
<span class="pause">||</span>

CSS

.scroll-text {
  overflow: hidden;
  border: 1px solid #e9e5e5;
  float: right;
  padding: 2px;
  width: 80.8%;
  height: 36px;
}
.scroll-text ul {
  height: auto;
  overflow: hidden;
  margin: 0;
  width: 3000px;
  padding: 7px;
}
.scroll-text ul li {
  float: left;
  margin-right: 10px;
  list-style: none;
}

JavaScript

//plugin code   
/*global jQuery */
/*!
 * jQuery Scrollbox
 * (c) 2009-2013 Hunter Wu <[email protected]>
 * MIT Licensed.
 *
 * http://github.com/wmh/jquery-scrollbox
 */

(function($) {

$.fn.scrollbox = function(config) {
  //default config
  var defConfig = {
    linear: false,          // Scroll method
    startDelay: 2,          // Start delay (in seconds)
    delay: 3,               // Delay after each scroll event (in seconds)
    step: 1,                // Distance of each single step (in pixels)
    speed: 32,              // Delay after each single step (in milliseconds)
    switchItems: 1,         // Items to switch after each scroll event
    direction: 'vertical',
    distance: 'auto',
    autoPlay: true,
    onMouseOverPause: true,
    paused: false,
    queue: null,
    listElement: 'ul',
    listItemElement:'li',
    infiniteLoop: true,     // Infinite loop or not
    switchAmount: 0,        // Give a number if you don't want to have infinite loop
    afterForward: null,     // Callback function after each forward action
    afterBackward: null,    // Callback function after each backward action
    triggerStackable: false // Allow triggers when action is not finish yet
  };
  config = $.extend(defConfig, config);
  config.scrollOffset = config.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
  if (config.queue) {
    config.queue = $('#' + config.queue);
  }

  return this.each(function() {
    var container = $(this),
        containerUL,
        scrollingId = null,
        nextScrollId = null,
        paused = false,
        releaseStack,
        backward,
        forward,
        resetClock,
        scrollForward,
        scrollBackward,
        forwardHover,
        pauseHover,
        switchCount = 0,
        stackedTriggerIndex = 0,
        stepBoost;

    if (config.onMouseOverPause) {
      container.bind('mouseover', function() { paused = true; });
      container.bind('mouseout', function() { paused = false; });
    }
   ...