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');

  (function _loop(idx) {
    $looped.removeClass('current').eq(idx).addClass('current');
     window.animate = function () {
      _loop((idx + 1) % $looped.length);
    }
    window.timeout = setTimeout(animate, 1000);
  }(0));
});


/* I want to stop the animation while I am hovering the <ul> element (marked with grey background) */

$("ul").mouseenter(function(){
    clearTimeout(timeout);
    $(this).one("mouseout", function() {
      window.timeout = setTimeout(animate, 1000);
    });
});

$("li").mouseenter(function(){
    $("li").removeClass("current");
    $(this).addClass("current");
    
    //Just for demo purposes
    $("li").css({"border-color":"transparent"});
    $(this).css({"border-color":"red"});
});