JSFiddle - React, Tailwind, and code Playground

by Nazem

HTML

<div id="textSlider">
<ul>
    <li class="active">Doors | Windows | Showers</li>
    <li>Superb Fenestration | Superior Service</li>
    <li>Doors2 | Windows2 | Showers2</li>
    <li>Superb Fenestration2 | Superior Service2</li>
</ul>
</div>
<div class="clear"></div>

CSS

#textSlider{
    position: relative;
    left: 0;
}
ul{
    list-style: none;
}
ul li{
    position: relative;
    left: -300px;
}
.clear{
    clear: both;
}

JavaScript

setTimeout(function(){
    loopList();
    setInterval(loopList,4000);
}, 0);

function loopList(){
    var $current = $('.active').animate({'left': '0px'},500)
    .delay(500).animate({'left': '0px'},500)
    .animate({'right':'1000px'},500)
    .removeClass('active');
    
    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}