JSFiddle - React, Tailwind, and code Playground

HTML

<div id="carusel" style="border:solid;width:500px;overflow:auto">     <div id="scrolled">              <img src="#" width="300px" height="200px" style="background-color:green;float:left;" alt="image 0">         <img src="#" width="350px" height="200px" style="background-color:yellow;float:left;" alt="image 1">         <img src="#" width="250px" height="200px" style="background-color:blue;float:left;" alt="image 2">         <img src="#" width="310px" height="200px" style="background-color:red;float:left;" alt="image 3">     </div>     </div>

JavaScript

$(document).ready(function(){
    var marg = 2; // отступы между фотками
    var hght = 100; // высота карусели 
    speed = 15; // скорость прокрутки
    
         
    var imgs = $("#scrolled > img");
    var scrl = $("#scrolled");
    var crsl = $("#carusel");
    wdth = 0;
    imgs.css("margin","0 "+marg);
    crsl.css({overflow:"hidden","height":hght});
    $.each(imgs,function(index,value){
        wdth += ($(imgs[index]).width()+(marg*2)+5);              
    })
    scrl.width(wdth);    
    
    function rightScroll(){
        var firstImg = $("#scrolled > img:first");
        var lastImg = $("#scrolled > img:last");     
        var scroll = crsl.scrollLeft();
        crsl.scrollLeft(scroll + speed);
        if(scroll > firstImg.width()){
            crsl.scrollLeft(scroll - (firstImg.width()+(marg*2)));
            firstImg.clone(true).insertAfter(lastImg);
            $(firstImg).remove();
        }
    }
    crsl.mouseover(function(){
        clearInterval(timer);                      
    }).mouseout(function(){
        timer = setInterval(rightScroll,10);                   
    })
    timer = setInterval(rightScroll,10);
});