JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="slider">
	<div class="sliderBox">
	    <img src="https://www.ugandaletsgotravel.com/wp-content/uploads/2016/05/CAPE-TOWN.jpg" style="width:300px;">
	    <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://likewallpaper.com/king-include/uploads/thumb_motorcycle1-3635499239.jpg">
	    <img src="https://www.ugandaletsgotravel.com/wp-content/uploads/2016/05/CAPE-TOWN.jpg" style="width:500px;">
	    <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://likewallpaper.com/king-include/uploads/thumb_motorcycle1-3635499239.jpg">
	    <img src="https://www.ugandaletsgotravel.com/wp-content/uploads/2016/05/CAPE-TOWN.jpg" style="width:200px;">
	    <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://likewallpaper.com/king-include/uploads/thumb_motorcycle1-3635499239.jpg">
	    <img src="https://www.ugandaletsgotravel.com/wp-content/uploads/2016/05/CAPE-TOWN.jpg" style="width:500px;">
	    <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://likewallpaper.com/king-include/uploads/thumb_motorcycle1-3635499239.jpg">
	</div>
	<div class="arrows">
	    <div class="left"><</div>
	    <div class="right">></div>
	</div>
</div>


<div class="slider">
	<div class="sliderBox">
	    <img src="https://avatanplus.com/files/photos/mid/576ff7e2f10f11558d604eab.jpg" style="width:500px;">
	    <img src="http://likewallpaper.com/king-include/uploads/thumb_motorcycle1-3635499239.jpg" style="width:1000px;">
	    <img src="https://avatanplus.com/files/photos/mid/576ff7e2f10f11558d604eab.jpg">
	    <img...

CSS

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

.slider{width: 99%;
    height: 360px;
    overflow:auto;
    border: #CCC 2px solid;
    margin: 10px auto;
}

.sliderBox{height: 100%;}

.arrows{
    width: 99%;
    height: 100px;
    position: absolute;
    margin: -230px  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: 95px;
    cursor:  pointer;
    border-radius: 10px;
}
.left{ float:  left; }
.right{ float:  right; }

img{
    width: 500px;
    height: 334px;
    margin: 0px  0px  0px  10px;
}

JavaScript

ScrollLeft(1000,300);

function ScrollLeft(px,speed){
    var widthContent=0, max=[];
    $.each($('.sliderBox'),function(i){
        $.each($('.sliderBox:eq('+i+')').children(),function(j,el){
            widthContent+=$(el).width()+parseFloat($(el).css('margin-left'))+4;
        });
        $(this).css({width:widthContent+'px'}); widthContent=0;
        max.push( $('.sliderBox:eq('+i+')').width()-$('.slider:eq('+i+')').width() );
    });
    $('.right').each(function(i){
        $(this).on('click',function(){
            if($('.slider:eq('+i+')').scrollLeft()<max[i]){ $('.slider:eq('+i+')').animate({scrollLeft:'+='+px},speed); }
        });
    });
    $('.left').each(function(i){
        $(this).on('click',function(){
            if($('.slider:eq('+i+')').scrollLeft()!==0){ $('.slider:eq('+i+')').animate({scrollLeft:'-='+px},speed); }
        });
    });
}