JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />

<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />

<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />

<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />

<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />

JavaScript

$(document).ready(function(){

$("#img2,#img3,#img4,#img5").hide();
    
    setTimeout(function(){
  $("#img1").fadeOut("slow", function () {
      });
 
}, 1000);
   setTimeout(function(){
  $("#img2").fadeIn("slow", function () {
      });
 
}, 2000);    
   setTimeout(function(){
  $("#img2").fadeOut("slow", function () {
      });
 
}, 3000); 
   setTimeout(function(){
  $("#img3").fadeIn("slow", function () {
      });
 
}, 4000);
    
       setTimeout(function(){
  $("#img3").fadeOut("slow", function () {
      });
 
}, 5000); 
   setTimeout(function(){
  $("#img4").fadeIn("slow", function () {
      });
 
}, 6000);
           setTimeout(function(){
  $("#img4").fadeOut("slow", function () {
      });
 
}, 7000);
               setTimeout(function(){
  $("#img5").fadeIn("slow", function () {
      });
 
}, 8000);
                   setTimeout(function(){
  $("#img5").fadeOut("slow", function () {
      });
 
}, 9000);

setTimeout(function(){
  $("#img1").fadeOut("slow", function () {
      });
 
}, 10000);
   setTimeout(function(){
  $("#img2").fadeIn("slow", function () {
      });
 
}, 11000);    
   setTimeout(function(){
  $("#img2").fadeOut("slow", function () {
      });
 
}, 12000); 
   setTimeout(function(){
  $("#img3").fadeIn("slow", function () {
      });
 
}, 13000);
    
       setTimeout(function(){
  $("#img3").fadeOut("slow", function () {
      });
 
}, 14000); 
   setTimeout(function(){
  $("#img4").fadeIn("slow", function () {
      });
 
}, 15000);
           setTimeout(function(){
  $("#img4").fadeOut("slow", function () {
      });
 
}, 16000);
               setTimeout(function(){
  $("#img5").fadeIn("slow", function () {
      });
 
}, 17000);
                   setTimeout(function(){
  $("#img5").fadeOut("slow", function () {
      });
 
}, 18000);



 });