JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
     <div class="box">4</div>
     <div class="box">5</div>
</div>
<div class="right">right</div>
<div class="left">left</div>

CSS

.container {
    border: 1px solid red;
    width: 300px;
    height: 100px;
    white-space: nowrap;
    overflow: hidden;
}
.box {
    width: 100px;
    height: 100px;
    position: relative;
    display: inline-block;
    background-color: blue;
    color: #fff;
    text-align: center;
    line-height: 100px;
}

JavaScript

var loop;
var moveRight = function(){
    $('.box').animate({left: '-=10'}, 100);
};

var moveLeft = function(){
    $('.box').animate({left: '+=10'}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '100px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
};

$('.right').mousedown(function(){
    loop = setInterval(moveRight, 200);
}).mouseup(function(){
    clearInterval(loop);
});

$('.left').mousedown(function(){
    loop = setInterval(moveLeft, 200);
}).mouseup(function(){
    clearInterval(loop);
});