JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="info-wrap">
		    <ul class="loop-info">
		        <li>text1</li>
		        <li>text2</li>
		        <li>text3</li>
		        <li>text4</li>
		        <li>text5</li>
		    </ul>
		</div>

CSS

.info-wrap {
	width:720px;
	height:340px;
	background-color:#FFF;
	margin:0 auto;
	margin-top: 100px;
	position: relative;
}
.info-wrap ul {
	list-style: none;
}
.info-wrap .loop-info li {
	display: none;
	font-size: 30px;
	color:#000;
}

JavaScript

function fadeInSequence($one) {
    //default to the first one list items
    if ($one == null) $one = $('.loop-info>li:lt(1)');

    //fade in the 1 found
    $one.fadeIn(2000, function () {
        //fade out the 1 after fadein and start
        $(this).fadeOut(2000);
    }).promise().done(function () {
        if ($one.last().nextAll(':lt(1)').length) {
            //Same function, next 1 items
            fadeInSequence($one.last().nextAll(':lt(1)'));
        } else {
            //Same function, from the beginning if none are left
            fadeInSequence();
        }
    });
}

$(function () {
    //start the infinite looping
    fadeInSequence();
});