JSFiddle - React, Tailwind, and code Playground

HTML

<div id="textSlider">
<ul>
    <li class="active">Doors | Windows | Showers</li>
    <li>Superb Fenestration | Superior Service</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

$('#textSlider ul li').each(function(){
    setTimeout(function(){
        $('.active').animate({'left': '0px'},500).delay(500).animate({'left': '0px'},500).animate({'left':'-300px'},500);
        $(this).removeClass('active');
    }, 2000);
    
});