JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

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

<div id="slider">
	<div id="content">
	    <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>
</div>

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}
#slider{width: 99%;height: 360px;overflow:auto;border:#CCC 1px solid;margin:  0px auto;}
#content{height: 100%;width: 3135px;}
#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; }
img{
    width: 780px;
    height: 334px;
    margin: 0px  0px  0px  0px;
}

JavaScript

ScrollLeft(500,300);

function ScrollLeft(px,speed){
    let max = $('#content').width() - $('#slider').width();
    $('#right').click(function(){($('#slider').scrollLeft()<max)?$('#slider').animate({scrollLeft:'+='+px},speed):''; });
    $('#left').click(function(){($('#slider').scrollLeft()!==0)?$('#slider').animate({scrollLeft:'-='+px},speed):''; });
}