JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div id="slider">
    <img class="active" alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/1" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/2" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/3" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/4" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/5" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/6" />
    <img alt="Slide" src="http://www.lorempixel.com/600/400/nightlife/7" />
</div>

CSS

#slider {
    position: relative;
    height: 400px;
    width: 600px;
    margin:10px 0;
}
#slider img {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow:none;
}

JavaScript

jQuery(document).ready(function () {
    //hide the slides
    jQuery("#slider img").not('#slider img:first-child').css("opacity", "0");
    //stack the slides according to their index
    // this is extremely important
    //without it the first image end up on top
    jQuery(jQuery('#slider img').get().reverse()).each(function (i) {
        jQuery(this).css("z-index", i);
    });

    //changes the slide 
    setInterval(function () {
        //get the current
        current = jQuery('.active');

        //get the next slide
        nextslide = jQuery('.active').next('img');

        //show the next slide behind the active slide
        nextslide.delay(100).css("opacity", "1");

        //then we fade out the current slide
        if (nextslide.length) {



            current.animate({
                "opacity": "0"
            }, 1100, function () {
                current.removeClass('active').next().addClass("active");
            });

        } else {
            current.animate({
                "opacity": "0"
            }, 1100, function () {
                current.removeClass('active');
                current.parent().firstChild.addClass("active");
            });
            current.parent().find("img:first-child").addClass('active').animate({
                opacity: "1"
            },
            1000);
        };
    }, 4000);


});