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 = show - 1;
    var length = 60;
    
    var gallery = $('#gallery');

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

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

    setInterval(function(){
        current = (current+1)%60;
        
        galleryItems.eq(current).slideDown();
        galleryItems.eq(current - show).slideUp();
    }, 3000);
});