JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Image Slider</title>
    </head>
    <body>
        <h1>Here is the image slider</h1>
        
        <div id="imageSlider">
            <div class="current" style="opacity: 1">
                <img src="http://www.autodesk4u.in/wp-content/gallery/audi-r8-gallery/audi_r8.jpg" alt="audi R8" class="gallery">
            </div>
            <div>
                <img src="http://www.rpmgo.com/images/audi_r8_fire.jpg" alt="audi R8" class="gallery">
            </div>
            <div>
                <img src="http://static.cargurus.com/images/site/2010/09/01/05/01/2011_audi_r8_5_2l_quattro_spyder-pic-5731856921125385430.jpeg" alt="audi R8" class="gallery">
            </div>
            <div>
                <img src="http://www.motorstown.com/images/audi-r8-r-04.jpg" alt="audi R8" class="gallery">
            </div>
        </div>
    </body>
</html>

CSS

<style type="text/css">
            #imageSlider {
                width:400px;
                height:400px;
                position:relative;
            }
            
            #imageSlider div {
                position: absolute;
                opacity: 0;
            }

            .current
            {
                z-index: 5;
            }

            .gallery {
                border: solid 2px blue;
                padding: 5px;
            }
        </style>

JavaScript

setInterval(rotateImages, 2000);
           
function rotateImages()
{
var $onCurrent= $('#imageSlider div.current') ;
var $onNext= $onCurrent.next().length ? $onCurrent.next() : $('#imageSlider div:first');   
                    
if (!$onNext.length )
    $onNext=$("#imageSlider div:first");

$("#imageSlider div").removeClass("current").css("opacity", 0);
$onNext.addClass('current').animate({opacity:1.0}, 1000);
}