JSFiddle - React, Tailwind, and code Playground

HTML

<p></p>
<div class="slideshow">
    <img id="1" src="http://davealger.info/i/1.jpg" />
    <img id="2" src="http://davealger.info/i/2.bmp" />
    <img id="3" src="http://davealger.info/i/3.png" />
</div>

CSS

.slideshow { position:relative; }
.slideshow img { position:absolute; left:0; top:0; }

JavaScript

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){
        var me=$('.slideshow :first-child');

        if ( me.attr('id') === '2' )
            $("p:last").html('getting ready to load slide 2');
        else
            $("p:last").html('');
        
        me.fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');
    }, 4000);
});