JSFiddle - React, Tailwind, and code Playground

by Alee

HTML

<ul class="boxes">
    <li class="box1"><img src="http://placehold.it/200x200/FF0000"/></li>
    <li class="box2"><img src="http://placehold.it/200x200/F3F3F3"/></li>
    <li class="box3"><img src="http://placehold.it/200x200"/></li>
</ul>

<ul class="boxes slide2">
    <li class="box1"><img src="http://placehold.it/200x200/000000"/></li>
    <li class="box2"><img src="http://placehold.it/200x200/333333"/></li>
    <li class="box3"><img src="http://placehold.it/200x200"/></li>
</ul>

CSS

ul.boxes li {
    display: none;
    list-style: none;
}

JavaScript

$(document).ready(function () {
    var allBoxes = $("ul.boxes").children("li");
    transitionBox( null, allBoxes.first() );
    
    var allBoxes2 = $("ul.boxes.slide2").children("li");
    transitionBox( null, allBoxes2.first() );
});

function transitionBox(from, to) {
    
    function next() {
        var nextTo;
        if (to.is(":last-child")) {
            nextTo = to.closest(".boxes").children("li").first();
        } else {
            nextTo = to.next();
        }
        to.fadeIn(500, function () {
            var rand = Math.round(Math.random() * (6000 - 500)) + 500;
            setTimeout(function () {
                transitionBox(to, nextTo);
            }, rand );
        });
    }
    
    if (from) {
        from.fadeOut(500, next);
    } else {
        next();
    }
}