JSFiddle - React, Tailwind, and code Playground

by Khaled Attia

HTML

<div class="container">
  <div class="left-arrow">&laquo</div>
  <div class="right-arrow">&raquo</div>
  <div class="a">
    <div class="b">
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
      <div class="background"></div>
    </div>
</div>
</div>

CSS

body{
  text-align: center;
  overflow-x: hidden;
}
.a{
    display: inline-block;
    height: 120px;
    max-width: 90%;
    overflow-x: auto;
  }
.b{
 width: 40000px;
}
.background:first-child{
  margin-left: 0;
}
.background{
  margin-top: 9px;
  width: 100px;
  height: 80px;
  background: green;
  float: left;
  margin-left: 10px;
  cursor: pointer;
}
.right-arrow, .left-arrow{
  background: yellow;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  z-index: 1;
  cursor: pointer;
  line-height: 40px;
  font-size: 45px;
}
.right-arrow{
  position: absolute;
  top: 25%;
  right: 0;
}
.left-arrow{
  position: absolute;
  top: 25%;
  left: 0;
  opacity: 0;
}
.right-arrow:hover, .left-arrow:hover{
  box-shadow: 1px 2px 7px .15px gray;
}
.container{
  display: inline-block;
  position: relative;
  width: 100%;

}

JavaScript

var rightArrow = document.querySelector(".right-arrow");
var leftArrow = document.querySelector(".left-arrow");
var aDive = document.querySelector(".a");
var bDive = document.querySelector(".b");

leftArrow.style.opacity = 0;
var increment = 0;

rightArrow.onclick = function(){
	aDive.scrollTo(increment += 300, 0);
  leftArrow.style.opacity = 1;
}

leftArrow.onclick = function(){
	aDive.scrollTo(increment -= 300, 0);
  if(increment === 0){
  	leftArrow.style.opacity = 0;
  }
}