JSFiddle - React, Tailwind, and code Playground

HTML

<div id="diashow" onmouseover="stop()" onmouseout="set()">
 <div id="divleft" onclick="prev()"></div><div id="divright" onclick="next()"></div>
</div>

CSS

#diashow{
  user-select: none;
  transition-duration: 1s;
  width: 600px;
  height: 224px;
  background-size: 600px 224px;
  background-position: center;
  background-image: url(https://cdn.discordapp.com/attachments/461567193927385091/534789187560407045/picture1.png);}
#diashow div{
  width: 300px;
  height: 224px;
  background-color: transparent;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  transition-duration: 1s;
  opacity: 0.4;}
#divleft:hover {box-shadow: inset 50px 0px 0px 0px white;}
#divright:hover {box-shadow: inset -50px 0px 0px 0px white;}

JavaScript

var images = [
  "url(https://cdn.discordapp.com/attachments/461567193927385091/534789187560407045/picture1.png)",
  "url(https://cdn.discordapp.com/attachments/461567193927385091/534789189162762240/picture2.png)",
  "url(https://cdn.discordapp.com/attachments/461567193927385091/534789190500614147/picture3.png)",
  "url(https://cdn.discordapp.com/attachments/461567193927385091/534789199837265929/picture4.png)"];
var num = 0;
var interval = setInterval(next, 5000);
function next(){
    var diashow = document.getElementById("diashow");
    num++;
    if(num >= images.length){num = 0;}diashow.style.backgroundImage = images[num];}
function prev(){
  var diashow = document.getElementById("diashow");
  num--;
  if(num < 0) {num = images.length-1;}diashow.style.backgroundImage = images[num];}
function stop(){clearInterval(interval);}
function set(){interval = setInterval(next, 5000);}