JSFiddle - React, Tailwind, and code Playground

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;
    background-color:blue;
}
.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;

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