JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <div id="slide1"></div>
  <div id="slide2"></div>
  <div id="slide3"></div>
</div>

CSS

.slider {
  width: 450px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#slide1, #slide2, #slide3 {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

#slide1 {background: blue;}

#slide2 {background:green;}

#slide3 {background:red;}

JavaScript

function foo1(){
slide2.style.display="none";
}
setInterval(foo1, 2000)



function foo2(){
slide2.style.display="block";
}
setInterval(foo2, 4000)



function foo3(){
slide3.style.display="none";
}
setInterval(foo3, 2000)


function foo4(){
slide3.style.display="block";
}
setInterval(foo4, 6000)