JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://edge1u.tapmodo.com/global/js/jquery.min.js"></script>
<div id="slideshow">
    <img src="http://jonraasch.com/img/slideshow/simple-jquery-slideshow.png" alt="Slideshow Image 1" class="active" />
    <img src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" alt="Slideshow Image 2" />
    <img src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" alt="Slideshow Image 3" />
    <img src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" alt="Slideshow Image 4" />
</div>

CSS

#slideshow {
    position:relative;
    height:350px;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}
#slideshow IMG.last-active {
    z-index:9;
}

JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ($active.length === 0) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({
        opacity: 0.0
    })
        .addClass('active')
        .animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active last-active');
    });
}

$(function () {
    setInterval(slideSwitch(), 5000);
});