JSFiddle - React, Tailwind, and code Playground

by nils_r

HTML

<ul id="images">
    <li>
        <img src="http://placekitten.com/320/240?image=1" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=2" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=3" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=4" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=5" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=6" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=7" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=8" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=9" alt="">
    </li>
    <li>
        <img src="http://placekitten.com/320/240?image=10" alt="">
    </li>
</ul>

CSS

li {
    margin-bottom: 10px;
}

img {
    box-shadow: 0 5px 2px -3px #333;
}

div{
    margin: 1em;
}

JavaScript

$(document).ready(function(){
    var images = $('li'),
        speed = 1000,
        current = 0,
        show = function(n) {
            $(images[current]).css({zIndex:0});
            $(images[n]).css({zIndex:1}).fadeIn('slow', function(){
                $(images[current]).hide();
                current=n;
            });        
        }, 
        update = function() {
            show(current<images.length-1 ? current+1 : 0);
        },
        interval = setInterval(update, speed);
    
    $('#images').css({position:'relative'});
    
    $(images)
        .hide().css({zIndex:0,position: 'absolute'})
        .first().show();
    
    $(images).bind({
        mouseover: function(){clearInterval(interval);},
        mouseout: function(){interval = setInterval(update, speed);}
    });
});