JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
   <div class='s1'>
       slide-1
   </div>
   <div class='s2'>
       slide-2
   </div>
   <div class='s3'>
       slide-3
   </div>
</div>

CSS

#slideshow { 
    position: relative; 
    width: 500px; 
    height: 250px; 
    padding: 10px; 
   
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px;
    display:none;
}
.s1{
    background:green;
}
.s2{
    background:blue;
}
.s3{
    background:red;
}

JavaScript

var _img=$("#slideshow  div"), zIndex=99;
$(_img).eq(0).show();
function loopIt(){
    $(_img).eq(1).css('z-index',zIndex+1).slideDown(1000,function(){
            zIndex=zIndex+2;
            $(_img).eq(0).hide();        
                $(_img).eq(2).css('z-index',zIndex).slideDown(1000,function(){
                    zIndex=zIndex+3;
                    $(_img).eq(1).hide();            
                        $(_img).eq(0).css('z-index',zIndex).slideDown(1000,function(){
                            $(_img).eq(2).hide(); 
                            loopIt();        
                        });           
                    
                });
    })
}
loopIt();