JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider auto" id="slider1">
  <div class="slides">
    <div class="slide active" style="background-image:url('https://placeimg.com/320/180/arch');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/640/250/animals');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/720/450/tech/sepia');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/480/480/nature');"></div>
  </div>
  <div class="nav prev"><div class="btn"><div class="arrow"></div></div></div>
  <div class="nav next"><div class="btn"><div class="arrow"></div></div></div>
</div>

<div class="slider auto" id="slider2">
  <div class="slides">
    <div class="slide active" style="background-image:url('https://placeimg.com/320/480/nature');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/640/480/people/sepia');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/640/180/tech');"></div>
    <div class="slide" style="background-image:url('https://placeimg.com/640/360/arch/sepia');"></div>
  </div>
  <div class="nav prev"><div class="btn"><div class="arrow"></div></div></div>
  <div class="nav next"><div class="btn"><div class="arrow"></div></div></div>
</div>

CSS

.slider {display:inline-block; position:relative; width:240px; height:135px; background:#000;}
.slider .slides {width:100%; height:100%;}
.slider .slides .slide {float:left; width:0; height:100%; background:center center/contain no-repeat; transition:width 0.5s ease 0s;}
.slider .slides .slide.active {width:100%;}

.slider .nav {position:absolute; top:0; width:15%; min-width:44px; height:100%; background:#888; opacity:0; cursor:pointer;}
.slider:hover .nav {opacity:0.3;}
.slider .nav.prev {left:0;}
.slider .nav.next {right:0;}
.slider .nav .btn {position:absolute; top:0; bottom:0; width:34px; height:34px; margin:auto 0; box-sizing:border-box; border:2px solid #ddd; border-radius:999px; background:#555; opacity:0.7; visibility:hidden;}
.slider .nav.prev .btn {left:5px;}
.slider .nav.next .btn {right:5px;}
.slider:hover .nav .btn {visibility:visible;}
.slider:hover .nav .btn:hover {border-color:#fff; opacity:1;}

.slider .nav .btn .arrow {position:absolute; top:0; bottom:0; width:0; height:0; margin:auto 0; border:10px solid transparent;}
.slider .nav.prev .btn .arrow {right:calc(50% - 3px); border-right-color:#ddd;}
.slider .nav.next .btn .arrow {left:calc(50% - 3px); border-left-color:#ddd;}
.slider .nav.prev .btn:hover .arrow {border-right-color:#fff;}
.slider .nav.next .btn:hover .arrow {border-left-color:#fff;}

JavaScript

window.onload = function() {
  function changeSlide(d, id) {
  	var slides = document.getElementById(id).children[0];
    for (var i=0,count=slides.children.length; i<count; ++i) {
      if (slides.children[i].className.indexOf("active") != -1) {var slide=slides.children[i]; break;} //store the current slide
    }
    if (d=="next") {
      if (slides.lastElementChild.className.indexOf("active") != -1) {
        slides.firstElementChild.className += " active"; //loop around and activate the first slide
      } else {slide.nextElementSibling.className += " active";} //activate the next slide
    } else { //prev
      if (slides.firstElementChild.className.indexOf("active") != -1) {
        slides.lastElementChild.className += " active"; //loop around and activate the last slide
      } else {slide.previousElementSibling.className += " active";} //activate the prev slide
    }
    slide.className = slide.className.replace(" active",""); //deactivate the current slide
  }
  
//AUTOMATIC LOOP------------------------------
	function timer(id){setTimeout(function(){if (document.getElementById(id).className.indexOf("auto") != -1) {changeSlide("next",id); timer(id);}},4000);}
  for (var i=0,s=document.getElementsByClassName("slider"),count=s.length; i<count; ++i) {timer(s[i].id);} //create a timer-loop for every slider
  
//EVENT-HANDLERS------------------------------
  for (var i=0,s=document.getElementsByClassName("slider"),count=s.length; i<count; ++i) {
    s[i].onmousedown = function(){return false;}; //otherwise sometimes the space next to the slider gets selected on navigation
    //click-handlers for prev/next buttons
    for (var j=0,c=s[i].children.length; j<c; ++j) {
      if (s[i].children[j].className.indexOf("nav") != -1) {
        s[i].children[j].onclick = function() {
        	var s = document.getElementById(this.parentNode.id);
          if (s.className.indexOf("auto") != -1) {s.className = s.className.replace(" auto","");} //stop the automatic loop
   ...