JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
      <li class="looped"></li>
      <li class="looped"></li>
      <li class="looped"></li>
      <li class="looped"></li>
      <li class="looped"></li>
      <li class="looped"></li>
      <li class="looped"></li>
    </ul>
</body>

CSS

li {height: 50px; width: 10px; float: left; margin-right: 5px; list-style: none; display: block; background: blue; border: 3px solid transparent;}
li.current {background: green;}
ul {width: 147px; background: #eee; height: 50px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -73px;}

JavaScript

$(function () {
        var $looped = $('li');
        var timeOut;
        var index = 0;
        function _loop(idx) {
            $looped.removeClass('current').eq(idx).addClass('current');
            timeOut = setTimeout(function () {
                index = (idx + 1) % $looped.length;
                _loop(index);
            }, 1000);
        };
        _loop(index);
        $("ul").hover(function () {
            window.clearTimeout(timeOut);
        }, function () {
            _loop(index);
        });
        $("li").hover(function () {
            $("li").removeClass("current");
            $(this).addClass("current");
        }, function () {
            $("li").removeClass("current");
        });
    });