JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="imageroller">
    <div>
        
        <img src="http://placekitten.com/g/120/200" alt="" />
        <img src="http://placekitten.com/g/100/200" alt="" />
        <img src="http://placekitten.com/g/160/200" alt="" />
        <img src="http://placekitten.com/g/160/200" alt="" />
        <img src="http://placekitten.com/g/120/200" alt="" />
        <img src="http://placekitten.com/g/100/200" alt="" />
        <img src="http://placekitten.com/g/160/200" alt="" />
        <img src="http://placekitten.com/g/160/200" alt="" />

    </div>
</div>

CSS

#imageroller {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

#imageroller > div {
    white-space: nowrap;
    height: 100%;
    float: left;
}

#imageroller img { 
    display: inline-block;
    height: 100%;
}

JavaScript

var delay = 2000;


setInterval(function () {
    
    var firstIMG = $('#imageroller > div img:first');
    
    firstIMG.animate({ 
        
            marginLeft: -firstIMG.width() 
        
        }, delay - 30 , 'linear', function() {
        
            $(this)
                .css({ marginLeft: 0 })
                .appendTo('#imageroller > div');
    
        });

}, delay );