JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="a_banner">
    <li>first banner</li>
    <li>second banner</li>
</ul>

JavaScript

$(document).ready(function(){	
	var $bannerItems = $("#a_banner>li");
	$bannerItems.hide();
	
	!function loop(index){
		if(!index) index = -1;
		index = (index + 1) % $bannerItems.length;
		$bannerItems.get(index).fadeIn(1000).delay(5000).fadeOut(1000, loop(index));
	}();
});