JSFiddle - React, Tailwind, and code Playground

by Strernd

HTML

<div id="container">

    <div id="slider">
        <div id="slide1" class="slide"> <a href="#" title="View my first image link"><img src="http://lorempixel.com/400/200?1"/></a>

        </div>
        <div id="slide2" class="slide"> <a href="#" title="View my second image link"><img src="http://lorempixel.com/400/200?2" /></a>

        </div>
        <div id="slide3" class="slide"> <a href="#" title="View my first image link"><img src="http://lorempixel.com/400/200?3" /></a>

        </div>
        <div id="slide4" class="slide"> <a href="#" title="View my third image link"><img src="http://lorempixel.com/400/200?4" /></a>

        </div>
        <div id="slide5" class="slide"> <a href="#" title="View my second image link"><img src="http://lorempixel.com/400/200?5" /></a>

        </div>
    </div>
</div>

CSS

#slider
{
    overflow:hidden;
    height:200px;
    position:absolute;
    top:20px;
    left:55px;
    border:10px solid #1b1b18;
    padding:0px;
    margin:0px;
    background-color:#adaca5;
    width:400px;
}
#slide1
{
    position:absolute;
    top:0px;
    z-index:1;
 
}
.slide
{
    position:absolute;
    top:200px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
 
}

JavaScript

var present=1;
var next=2;
var mouseover = false;
var total_slide = $('.slide').size();
function slide(){
    if(!mouseover){
            present_slide="#slide"+present;
            next_slide="#slide"+next;
            $(present_slide).css("top","200px");
            $(next_slide).css("top","0px");
            present++;
            next++;
            if(present==(total_slide+1))
            {
                present=1;
                next=2;
                for(i=1;i<=total_slide;i++)
                {
                    $("#slide"+i).css("top","200px");
                }
                $("#slide1").css("top","0px");
            }
    }
}

$('#slider').mouseenter(function(){
    mouseover = true;
});
$('#slider').mouseleave(function(){
    mouseover = false;
});

var t=setInterval(function(){slide()},5000);