JSFiddle - React, Tailwind, and code Playground

HTML

<div id="arrows">
	<div id="left"><</div>
	<div id="right">></div>
</div>

<div id="slider">
	<img src="https://www.ugandaletsgotravel.com/wp-content/uploads/2016/05/CAPE-TOWN.jpg">
	<img src="https://i.io.ua/img_bb/large/0086/00869185.jpg">
	<img src="https://avatanplus.com/files/photos/mid/576ff7e2f10f11558d604eab.jpg">
	<img src="http://www.inform.kz/fotoarticles/20150609005219.jpg">
</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}

#arrows{
	width: 100%;
	height: 100px;
	position:  fixed;
	margin: 100px  0px  0px  0px;
}
#left,#right{
	width: 50px;
	height: 100%;
	background: rgba(157, 0, 0, 0.7);
	color: #FFEB3B;
	text-align:  center;
	font-size: 45px;
	line-height: 90px;
	cursor:  pointer;
}
#left{
	float:  left;
}
#right{
	float:  right;
}
#slider{
	width: 3092px;
	height: 340px;
	margin-left: 0px;
}
img{
	width: 780px;
	height: 334px;
	margin: 0px  0px  0px  -10px;
}

JavaScript

ScrollLeft(100);
 
function ScrollLeft(unit) {
    let cur = 0;
    document.getElementById('right').addEventListener ('click', function(){
        scrollTo(document.body.scrollWidth,0);
    });
    document.getElementById('left').addEventListener ('click', function(){
        cur=window.pageXOffset-unit;
        scrollTo(cur,0);
    });
}