JSFiddle - React, Tailwind, and code Playground

by bionicoz

HTML

<div class="slider">
    <img src="http://lorempixel.com/300/200"/>
    <img src="http://lorempixel.com/300/200?2"/>
    <img src="http://lorempixel.com/300/200?3"/>
    <img src="http://lorempixel.com/300/200?4"/>
    <img src="http://lorempixel.com/300/200?5"/>
</div>


<p id="debug"></p>

CSS

.slider{
    width:300px; height:200px;
    position:relative;
}

.slider img{ 
    position:absolute;
    top:0;
    display:block;
}

JavaScript

var to,i=0;

$('.slider').on({
    mouseenter: function () {
        $this=$(this); var $howmany=$('.slider img').length;
        clearInterval(to);
        to=setInterval(function(e){
        if(++i > $howmany -1) i=0;
            $('p').html('#'+i+' mouseover');
            $this.children('img').css('display','none').eq(i).css('display','block');
    
        },500);
    },
    mouseleave: function () {
        clearInterval(to);
        $('p#debug').html('#'+i+' mouseout');
    }
});