JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider auto">
  <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">
  <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:#ddd; 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:hover .btn {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:hover .btn .arrow {border-right-color:#fff;}
.slider .nav.next:hover .btn .arrow {border-left-color:#fff;}

JavaScript

$(function() {
  function changeSlide(d, slides) {
    var slide = $(slides).children(".slide.active")[0]; //store the current slide
    if (d=="next") {
      if ($(slides).children(".slide").last().hasClass("active")) {
        $(slides).children(".slide").first().addClass("active"); //loop around and activate the first slide
      } else {$(slide).next().addClass("active");} //activate the next slide
    } else { //prev
      if ($(slides).children(".slide").first().hasClass("active")) {
        $(slides).children(".slide").last().addClass("active"); //loop around and activate the last slide
      } else {$(slide).prev().addClass("active");} //activate the prev slide
    }
    $(slide).removeClass("active"); //deactivate the current slide
  }
  
//AUTOMATIC LOOP------------------------------
	function timer(slides){setTimeout(function(){if ($(slides).parent().hasClass("auto")) {changeSlide("next",slides); timer(slides);}},4000);}
  $(".slider").each(function(){timer($(this).children(".slides")[0]);}); //create a timer-loop for every slider
  
//EVENT-HANDLERS------------------------------
  $(".slider").on("mousedown",function(){return false;}); //otherwise sometimes the space next to the slider gets selected on navigation
  $(".slider .nav").click(function(){
    if ($(this).closest(".slider").hasClass("auto")) {$(this).closest(".slider").removeClass("auto");}; //stop the automatic loop
    changeSlide(this.className.split(" ")[1],$(this).siblings(".slides")[0]); //prev/next slide
  });
});