JSFiddle - React, Tailwind, and code Playground

by Alexander Lehmann

HTML

<div id="myGallery">
    <img src="http://artsoft.de/images/image1.jpg" class="active" />
    <img src="http://artsoft.de/images/image2.jpg" />
    <img src="http://artsoft.de/images/image3.jpg" />
  </div>

CSS

#myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery img.active{
      display:block;
    }

JavaScript

window.swapImages= function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
}

$(document).ready(function(){
      // Run our swapImages() function every 5secs
    setInterval('swapImages()', 2000);
    }
);