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;
}

JavaScript

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