JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
   <title>Example Slideshow</title> 
</head> 
<body> 
<p>Text above the slideshow.</p> 
<div id="slideShow"> 
   <img src="http://robertmarkbram.appspot.com/content/javascript/jQuery/images/1.jpg" /> 
</div> 
<p>Text below the slideshow.</p> 
</body> 
</html>

CSS

#slideShow {
         position:relative;
         width: 500px;
         height: 500px;
      }
      #slideShow IMG {
         position:absolute;
      }

JavaScript

// Contain all your functionality in a self calling anonymous
  //   function, so that you don't clutter the global namespase.
(function() {
    // ------
    // ###### Edit these.
    // Assumes you have images in path named 1.jpg, 2.jpg etc.
    var imagePath = "http://robertmarkbram.appspot.com/content/javascript/jQuery/images";
    var lastImage = 5;         // How many images do you have?
    var fadeTime = 4000;       // Time between image fadeouts.
 
    // ------
    // ###### Don't edit beyond this point.
    // No need for outer index var
    function slideShow(index) {          
        var url = imagePath + "/" + index + ".jpg";
          // Add new image behind current image
        $("#slideShow").prepend($("<img/>").attr("src",url));
          // Fade the current image, then in the call back
          //   remove the image and call the next image
        $("#slideShow img:last").fadeOut("slow", function() {
            $(this).remove();
            setTimeout(function() { slideShow((index % lastImage) + 1) }, fadeTime);
        });
    }
    $(document).ready(function() {
        setTimeout(function() { slideShow(2) }, fadeTime);
    });
})();