JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div class="w3-content w3-section">
  <img class="myCarousel2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1 - 350%C3%97150&w=350&h=150">
  <img class="myCarousel2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=2 - 350%C3%97150&w=350&h=150">
  <img class="myCarousel2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=3 - 300%C3%97150&w=350&h=150">
  <img class="myCarousel2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=4 - 300%C3%97150&w=350&h=150">
</div>

JavaScript

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("myCarousel2");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds
}