JSFiddle - React, Tailwind, and code Playground

by Collin Krueger

HTML

<div id="slideshow">
    <div class="current">
        <img src="http://lorempixel.com/400/200/abstract/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/people/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/sports/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/animals/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/nature/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/food/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/technics/" alt="Img" height="382" width="594">
    </div>
    <div>
        <img src="http://lorempixel.com/400/200/fashion/" alt="Img" height="382" width="594">
    </div>
</div>

CSS

#slideshow div {
    z-index: 0;
    position: absolute;
}
#slideshow div.previous {
    z-index: 1;
}
#slideshow div.current {
    z-index: 2;
}

JavaScript

$(function () {
    setInterval("rotateImages()", 3440);
});

function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length === 0) {
        NextPhoto = $('#slideshow div:first');
    }
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({
        opacity: 0.0
    }).addClass('current')
        .animate({
        opacity: 1.0
    }, 1000,

    function () {
        CurrentPhoto.removeClass('previous');
    });
}