JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="imgRotator">
<img class="active" src="http://www.uthemes.com/dev/wp-content/themes/uthemes/theme/assets/img/large-crowd-bg.jpg" alt="My image" />
<img src="http://www.uthemes.com/dev/wp-content/themes/uthemes/theme/assets/img/large-home-bg.jpg" alt="My image" />       
</div>

CSS

#imgRotator { width: 100%; height: 500px; position: relative; }
#imgRotator img { width: 100%; height: 500px; position: absolute; z-index: 1; }
#imgRotator img.active { z-index: 3; }

JavaScript

function cycleImages()
{
    var active = $('#imgRotator .active');
    var next = (active.next().length > 0) ? active.next() : $('#imgRotator img:first');
    
    next.css('z-index', 2); //move the next image up the pile
    
    active.fadeOut(1500, function()
    {//fade out the top image
        active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
        
        next.css('z-index', 3).addClass('active'); //make the next image the top one
    });
}

// run every 7s
setInterval('cycleImages()', 7000);