JSFiddle - React, Tailwind, and code Playground

by Suprotim Agarwal

HTML

<h2>A Simple Image Gallery</h2>
<div id="gallery">
    <img src="http://lorempixel.com/400/300/nature/1" />
    <img src="http://lorempixel.com/400/300/nature/2" />
    <img src="http://lorempixel.com/400/300/nature/3" />
    <img src="http://lorempixel.com/400/300/nature/4" />
</div>







<p id="spacer">
    <span> The eBook is available at <a href="http://www.jquerycookbook.com">The Absolutely Awesome jQuery CookBook</a></span>
</p>

CSS

body {
    text-align: center;
}

#gallery{
    position: absolute;
}

#gallery img {
    display: none;
    position: absolute;
}






/* Additional css below. Not related to the demo */
#spacer {
position:fixed;
height:40px;
top:380px;
line-height: 40px;    
font-family: 'Noto Sans', sans-serif;
background-color:#e18728;
}

#spacer span{
     display:inline-block; vertical-align:middle
     line-height: 14px;
}

h2 {
 text-align:left;
}

JavaScript

function slideshow(idx) {
    var $img = $("#gallery img");
    $img.eq(idx).fadeIn(2000, function () {
        var $this = $(this);
        setTimeout(function () {
            $this.fadeOut(2000);
            slideshow((idx + 1) % $img.length);
        }, 4000);
    });
}

slideshow(0);