JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div id="slideshow">
  <img src="https://placedog.net/900/600/" class="active" />
  <img src="https://placedog.net/900/400/" />
  <img src="https://placedog.net/900/500/" />
  <img src="https://placedog.net/900/700/" />
  <img src="https://placedog.net/900/800/" />
</div>

CSS

#slideshow {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}

img {
  width: 100%;
  position: absolute;
}

.active{
  z-index: 100;
}

JavaScript

function run() {
  var $active = $('.active');
  var $next = $active.next(); 

  $next.addClass('active');
  $active.removeClass('active');

	console.log('next');

	setTimeout(run, 2000);
}

run();