JSFiddle - React, Tailwind, and code Playground

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 bilder = $('li');
    $(bilder).fadeOut();
    var aktuell;
    var i = 0;
    var h = -1;
    var a = $(bilder).length;
    $(bilder).css(
    {'position':'absolute','top':'10px','left':'10px','z-index':'0'});
    var inter = function(){
        if(i<a){
           $(bilder[i]).css({'z-index':'1'});
           $(bilder[i]).fadeIn(1000,function(){
                $(bilder[h]).fadeOut();
               $(bilder[h]).css({'z-index':'0'});});
           i++;
           h++;
        }
        else{
            $(bilder[i]).css({'z-index':'1'});
            $(bilder[i]).fadeIn(1000,function(){
                $(bilder[a]).fadeOut();
                $(bilder[a]).css({'z-index':'0'});});
            i = 0;
            h = -1;
        }
    };
    var start = setInterval(inter, 3000);
    $(bilder).bind('mouseover',function(){
        clearInterval(start);
    });
    $(bilder).bind('mouseout',function(){
         setInterval(inter, 3000);
    });
});