JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="slider">
    <li>Erste</li>
    <li>Zweite</li>
    <li>Dreite</li>
    <li>Vierte</li>
    <li>Fünfte</li>
<ul>

CSS

#slider { position: absolute; height:20px; overflow:hidden;}
#slider li{ width: 100px; height: 20px; overflow: hidden; float:left; text-align:center; }

JavaScript

$(function () {
    
    setInterval(function () {
        
        var slider = $('#slider'),
            li = slider.find('li'),
            h = li.height(),
            w =li.width(),
            item = li.first().clone();
    
        slider
            
            .css({width: w+(w*li.index())})
            .animate({left: "-=" + w}, 2500, function () { 
                
                $(this).css({left: 0})
                li.first().remove();        
                
            })
            .append(item);   
        
    }, 2500)
        
})