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: none;
  position: absolute;
  top: 0;
  left: 0;
}

#slide1 {background: blue;}

#slide2 {background:green;}

#slide3 {background:red;}

JavaScript

"use strict";
let n = 0;

function showSlide() {
  let blockId = `slide${n+1}`;
  n++; n %= 3;
  let allSlides = document.querySelectorAll('.slider > div'),
      activeSlide = document.getElementById(blockId);
  for(let i = 0; i < allSlides.length; i++){
    allSlides[i].style.display = "none";
  }
  activeSlide.style.display = "block";
}

setInterval(showSlide, 2000);