JSFiddle - React, Tailwind, and code Playground

HTML

<div id="window">
    <div id='div_1'>content currently displayed</div>
    <div id='div_2'>content to be loaded</div>
    <div id='div_3'>content to be loaded</div>
</div>

CSS

#window { position: relative; overflow: hidden; height: 20px; }

#window div { position: relative; }

div { line-height: 20px; }

JavaScript

var size = 0;
var count = 0;

$(function() {
    size = $('#window div').size();
    setTimeout(slideDivs, 2000);


});

function slideDivs() {
    if (size == (count + 1)) {
        var top = 20 * (size - 1);
        $('#window div').animate({
            top: '+=' + top
        }, function() {
            
        });
        count = 0;
    } else {
        count++;
        $('#window div').animate({
            top: '-=20'
        }, function() {
        });
    }
    setTimeout(slideDivs, 2000);
}