JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider_test">
    <div id="defil">
        <div id="content">
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/01.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/02.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/03.jpg" /></div>
            <div><img src="http://www.devtrix.net/sliderman/demos/demo_4/img/04.jpg" /></div>
        </div>
    </div>
</div>

CSS

#slider_test {
    overflow: hidden;
    width: 500px;
}

#slider_test #content {
    position: relative;
    width: 10000px;
}

#slider_test #content div {
    float: left;
}

JavaScript

$(function() {
var pixel = 2;
var interval = 100;

var $slider = $("#slider_test");
var $slider_content = $slider.find("#content");
var $content_defil = $slider_content .find("#defil");

var ref = 0;
function move() {
    $slider_content.css('left', ($slider_content.offset().left - pixel) +"px");
    ref += pixel;
    
    var $first_child = $slider_content.find('>:first-child');
    if($first_child.width() < ref) {
        $first_child.appendTo($slider_content);
        $slider_content.css('left', $slider.offset().left +"px");
        ref = 0;
    }
}

var action = setInterval(move, interval);

$("#slider_test #content").mouseout(function() {
    action = setInterval(move, interval);
});

$("#slider_test #content").mouseover(function() {
    clearTimeout(action);
});

});