JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <div id="slide1"></div>
  <div id="slide2"></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;
  
}

JavaScript

function foo(){
slide2.style.display="none";

}
setInterval(foo, 2000)


function foo2(){
slide2.style.display="block";

}
setInterval(foo2, 4000)