JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cycler">
    <img class="active" src="http://www.placehold.it/300x300" />
    <img src="http://www.placehold.it/305x300" />
    <img src="http://www.placehold.it/310x300" />
</div>

CSS

.cycler{position:relative;}
.cycler img{position:absolute;z-index:1}
.cycler img.active{z-index:3}

JavaScript

$(document).ready(function(){
    
function cycleImages(){
	  $('.cycler').each(function(){
		  var $active = $(this).find('.active');
		  var $next = ($(this).find('.active').next().length > 0) ? $(this).find('.active').next() : $(this).find('img:first');
		  $next.css('z-index',2);
		  $active.fadeOut(1500,function(){
			  $active.css('z-index',1).show().removeClass('active');
			  $next.css('z-index',3).addClass('active');
		  });
	  });
    }

    setInterval(function(){cycleImages()},1000);
})