JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="text">
    <div class="text-block">Текст 1</div>
    <div class="text-block">Текст 2</div>
    <div class="text-block">Текст 3</div>
    <div class="text-block">Текст 4</div>
</div>

CSS

.text-block {
    display: none;    
}

JavaScript

$(document).ready(function() {
    $('.text .text-block').eq(0).addClass('active').fadeIn(1000);

    setInterval('blockAnimate();', 5000);
});


function blockAnimate() {
    var length = $('.text .text-block').length - 1;
    $('.text .text-block').each(function(index) {
        if($(this).hasClass('active') && index != length) {
            $(this).removeClass('active').fadeOut(1000).next('.text-block').addClass('active').delay(1000).fadeIn(1000);
            return false;
        } else if (index == length) {
            $(this).removeClass('active').fadeOut(1000);
            $('.text .text-block').eq(0).addClass('active').delay(1000).fadeIn(1000);
            return false;
        }
    });
};