JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="arrows">
<a class="prev" onclick="sLeft()">&#10094;</a>
<a class="next" onclick="sRight()">&#10095;</a>
<div class="scrollCont" id="scrollCont">

<div class="scrollDiv">div1</div>
<div class="scrollDiv grey">div2</div>
<div class="scrollDiv">div3</div>

<div class="scrollDiv grey">div4</div>
<div class="scrollDiv">div5</div>
<div class="scrollDiv grey">div6</div>

<div class="scrollDiv">div7</div>
<div class="scrollDiv grey">div8</div>
<div class="scrollDiv">div9</div>

</div>
</div>


<div id="pos">

</div>

CSS

.arrows {position: relative;width:100%;height:280px;border:1px solid #999;padding:0;margin:0;}

.scrollCont {padding:0;margin:0;
  width:100%;height:280px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
   -webkit-overflow-scrolling: touch; -ms-overflow-style: none;
}

.scrollDiv {padding:0;margin:0;
display: inline-block;
width:280px;height:280px;
}
.grey {background-color:#dedede;}


  
  /* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: #999;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: #000;
}
::-webkit-scrollbar {display:none;}
::-ms-scrollbar {display:none;}
::-moz-scrollbar {display:none;}
::scrollbar {display:none;}
 
 /*      ::-webkit-scrollbar {display:none;}      */

JavaScript

function sLeft() {
var scrollp = window.offsetLeft || document.getElementById("scrollCont").scrollLeft;
var p = (scrollp-284);
document.getElementById("scrollCont").scrollLeft = document.body.scrollLeft = p;

document.getElementById("pos").innerText = p;
}


function sRight() {
var scrollp = window.offsetLeft || document.getElementById("scrollCont").scrollLeft;
var p = (scrollp+284);
document.getElementById("scrollCont").scrollLeft = document.body.scrollLeft = p;

document.getElementById("pos").innerText = p;
}