JSFiddle - React, Tailwind, and code Playground

by Boopathi Rajan

HTML

<div id="slider">
    <ul class="slides">
    <li class="flex-active-slide"> <a> aaaaa </a>   </li>
    <li> <a> bbbbb </a>   </li>
    <li> <a> ccccc </a>   </li>
    <li> <a> ddddd </a>   </li>
</ul>

CSS

li{
    cursor : pointer;
    display:none;
}
.flex-active-slide{
    color : red;
}

JavaScript

$( document ).ready(function() {
setInterval(function ()
            {
                var a=$('#slider .slides li.flex-active-slide');
                var b=$('#slider .slides li').first();
                if (a.is(":last-child")) {
                    a.removeClass('flex-active-slide');
                    b.addClass('flex-active-slide');
                    a.css("display","none"); 
                    b.css("display","list-item");
                }
                else
                {
                a.removeClass('flex-active-slide').next().addClass('flex-active-slide');
             a.css("display","none"); 
             a.next().css("display","list-item")
                }
    
 }, 2400);
});