JSFiddle - React, Tailwind, and code Playground

by Kripanath Aditya

HTML

<div class="container">
    <div class="slider1"></div>
    <div class="slider2"></div>
    <div class="slider3"></div>
</div>

CSS

.container {
    width: 500px;
    height: 250px;
    margin: 0 auto;
}
.slider1 {
    width: 500px;
    height: 250px;
    margin: 0 auto;
    //background-image: url(images/image-1.jpg);
    background-color:yellow;
    position: absolute;
    z-index: 1;
}
.slider2 {
    width: 500px;
    height: 250px;
    margin: 0 auto;
    //background-image: url(images/image-2.jpg);
    background-color:green;
    position: absolute;
    z-index: 2;
}
.slider3 {
    width: 500px;
    height: 250px;
    margin: 0 auto;
    //background-image: url(images/image-3.jpg);
    background-color:blue;
    position: absolute;
    z-index: 3;
}

JavaScript

$(document).ready(function () {

    var runForever = function () {
        //$(".slider1").hide();
        $(".slider2").hide(); //at start slider2 remains hidden;
        $(".slider3").hide(); //at start slider3 remains hidden;


        $(".slider2").slideDown(2000, function () {
            $(".slider3").slideDown(2000, function () {
                $(".slider3").slideUp(2000, function () {
                    $(".slider2").slideUp(2000, runForever);
                });
            });
        });
    };
    runForever();
});