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="left">left</div>
<div class="right">right</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;
    margin-left: 2px;
}

JavaScript

var $boxes = $('.box');
var max = $boxes.length;
$('.left').click(function(){
    var count = 0;
    $boxes.animate({left: '+=100'}, 100, function(){
        if (++count != max) return;
        var $last = $('.box').last();
        $last.prependTo('.container');
        $('.box').css('left','0px');
    });
});

$('.right').click(function(){
    var count = 0;
    $('.box').animate({left: '-=100'}, 100, function(){
        if (++count != max) return;
        var $last = $('.box').first();
        $last.appendTo('.container');
        $('.box').css('left','0px');
    });
});