JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider1">
	<div class="slider2">
	
        <div class="slide">a</div>
        <div class="slide">a</div>
        <div class="slide">a</div>
        <div class="slide">a</div>
        <div class="slide">a</div>
	
	</div>
</div>

<div id="setas">
    <div id="seta-esquerda">Esquerda</div>
	<div id="seta-direita">Direita</div>
</div>

CSS

html {
background-color: #bcbcbc;
}

.slider1 {
overflow: hidden;
height: 50px;
width: 130px;
float: left;
}

.slider2 {
background-color: #FFF;
width: 500px;
}

.slide {
float: left;
background-color: yellow;
margin-left: 11px;
height: 50px;
width: 50px;
}

#seta-esquerda {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}
#seta-direita {
cursor: pointer;
font-family: verdana;
font-size: 13px;
}

JavaScript

$( "#seta-direita" ).click(function() {
if (!$(".slider2").is(':animated'))
{
if ($(".slider2").offset().left < 8)
{
$(".slider2").animate({ "margin-left": "+=65px" });
}
return false;
}
});

$( "#seta-esquerda" ).click(function() {
if (!$(".slider2").is(':animated'))
{
if ($(".slider2").offset().left > -187)
{
$(".slider2").animate({ "margin-left": "-=65px" });
}
return false;
}
});