JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div id="background_cycler" >

<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="https://placekitten.com/g/350/150" alt=""/>
<img src="https://placekitten.com/g/450/150" alt=""   />
<img src="https://placekitten.com/g/550/150" alt=""  />
<img src="https://placekitten.com/g/650/150" alt=""/>		
<img src="https://placekitten.com/g/750/150" alt=""  />
</div>

CSS

#background_cycler{
  padding:0;
  margin:0;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:-1
}
#background_cycler img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:1
}
#background_cycler img.active{
  z-index:3
}

JavaScript

function cycleImages(){
      var $active = $('#background_cycler .active');
      var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
	  $active.fadeOut(1500,function(){//fade out the top image
	  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

    $(window).load(function(){
		$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
		  // run every 7s
		  setInterval('cycleImages()', 7000);
    })