JSFiddle - React, Tailwind, and code Playground

by darkajax

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

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