JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="loading">Loading...</div>
    <div id="content"></div>
</div>

CSS

#wrapper
{
    width:336px;
    height:226px;
    padding:20px;
    background:#eee;
    border-radius:10px;
    border:1px solid #ccc;
    position:relative;
}

#content
{
    position:relative;
    width:100%;
    height:100%;
}

#content img
{
    width:100%;
    height:100%;
    border:1px solid #ccc;
    position:absolute;
}

#loading
{
    width: 4em;
    margin-top: 6em;
    left:50%;
    margin-left:-2em;
    position:absolute;
    color:#aaa;
    font-family:sans-serif;
}

JavaScript

$(document).ready(function(){

    var images = [
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003b.jpg",
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005b.jpg",
        "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001b.jpg"
    ];
    
    var delay = 2000;
    var transition = 1000;
    
    for(var i in images)
    {
        var img = document.createElement("img");
        img.src = images[i];
        img.onload = function(){
            var parent = document.getElementById("content");
            parent.insertBefore(this,parent.childNodes[0]);
            if(i == images.length - 1)
            {
                i = 0;
                startSlides();
            }
        }
    }
    
    function startSlides()
    {
        $("#content img:last").delay(delay).fadeTo(transition,0,function(){
            $(this).insertBefore($(this).siblings(":first")).fadeTo(0,1);
            startSlides();
        });
}

});