JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="content">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
</div>
<button id="goLeft">LEFT</button>
<button id="goRight">RIGHT</button>

CSS

#container {
width:100%;
overflow:hidden;
}
#content {
height:140px; 
width:4290px;
}
.blocks{
display: inline-block;
width: 130px;
height: 130px;
    background:green;
}

#goLeft{
position:absolute;
top:0px;
left:0px;
height:130px; 
}

#goRight{
position:absolute;
top:0px;
right:0px;
height:130px; 
}

JavaScript

$(function() {

var stepSize = 100,
$container = $("#container"),
$content = $container.find("#content");

function scroll(offset) {
$container.scrollLeft($container.scrollLeft() + offset);
}

$("#goLeft").bind('click', function() {
scroll(0 - stepSize);
});
$("#goRight").bind('click', function() {
scroll(stepSize);
});

});
setInterval(function(){$("#goRight").click()},2000)