JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
    <img class="active" src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
</div>

CSS

#slideshow {
    height:327px;
    border:thick #000;
    list-style:none;
    margin:0px auto;
    width:600px;
    overflow: hidden;
    position:relative;
}

#slideshow img {
     border: solid #000000 10px;
     display:block;
     position:absolute;
     z-index: 8;
}

#slideshow img.active {
    z-index:10;
}

#slideshow img.last-active {
    z-index:9;
}

JavaScript

window.setInterval(function() {
    slideSwitch();
}, 1500);

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

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

    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}, 2000, function() {
            $active.removeClass('active last-active');
        });
}