JSFiddle - React, Tailwind, and code Playground

by karim79

HTML

<div id="content"></div>

CSS

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

JavaScript

var images = [
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_003t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_005t.jpg",
    "http://imaging.nikon.com/lineup/dslr/d90/img/sample/pic_001t.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();
    });
}