JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="gallery">
</ul>

CSS

#gallery {
    width: 150px;
    border-bottom: 1px solid #666;
}

#gallery li {
    border-top: 1px solid #ccc;
    padding: 5px 10px 6px;
    text-align: center;
}

JavaScript

$(document).ready(function() {
    var show = 9;
    var current = 0;
    var length = 60;
    
    var gallery = $('#gallery');

    for (var i = 0; i < length; i++) {
        var n = $('<li />').appendTo(gallery).text('Item ' + i);
        if (i > show - 1) n.hide();
    }

    var galleryItems = gallery.children('li');
    length = galleryItems.length;

    setInterval(function(){
        for(var i = current; i < (current+show); i++){
            galleryItems.eq(i).fadeOut(300, function(){
                var idx = (galleryItems.index(this) + show) % length;
                galleryItems.eq(idx).fadeIn(300);
            });
        }
        
        current += show;
        if(current > length) current = 0;
    }, 4000);
});