JSFiddle - React, Tailwind, and code Playground
HTML
<div id="carousel">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
<div>Test 5</div>
<div>Test 6</div>
<div>Test 7</div>
</div>
CSS
#carousel {
width: 100px;
height: 70px;
overflow: hidden;
border: 1px solid #000;
}
JavaScript
setInterval(scrollCarousel, 50);
function scrollCarousel(){
var c = document.getElementById('carousel');
// Remove text nodes
while(c.firstChild && c.firstChild.nodeType == 3)
c.removeChild(c.firstChild);
// Scroll Carousel
if(c.scrollTop > c.firstChild.offsetHeight){
c.appendChild(c.firstChild);
c.scrollTop = 1;
}else
c.scrollTop += 1;
}