JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="slider">
    <a id="butRight"></a>
    <a id="butLeft"></a>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>
</body>

CSS

#slider{
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.img{
   top:0;
   left:0;
   z-index:1;
    position: absolute;
    width: 100%;
    height: 400px;
    transition: left 0.5s;
}
.img:first-child {
  display:block;
}
.img:nth-child(3){
    background-color: green;
}
.img:nth-child(4){
    background-color: grey;
}
.img:nth-child(5){
    background-color: darkcyan;
}
.img:nth-child(6){
    background-color: darkkhaki;
}
#butRight,#butLeft{
    z-index: 200;
    position: absolute;
    top:200px;
    width: 40px;
    height: 40px;
    background-color: yellow;
    cursor:pointer;
}
#butRight{
    right: 5px;
}
#butLeft{
    left: 5px;
}

JavaScript

var list=document.querySelectorAll('.img'),

i=len=list.length-1,

moveL=function(e){
  list[i].style.left='-100%';
  i=Math.max(1,i-1);
},
moveR=function(e){
  list[i].style.left='';
  i=Math.min(len,i+1);
};

document.getElementById('butLeft').addEventListener('click',moveL);
document.getElementById('butRight').addEventListener('click',moveR);