JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="wrap">
<img src="http://i47.tinypic.com/mtxpcl.jpg" />
<img src="http://i46.tinypic.com/2vjq4bt.jpg" />
</div>

CSS

#wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
position: relative;
    z-index: 2;
}

#wrap img {
    position:absolute;
    top:0;
    display:none;
    width:100%;
    z-index: 1;
    min-height: 400px;
}

JavaScript

$('img').hide();

function rotateImg() {
    $("#wrap img").first().appendTo('#wrap').fadeOut(1000);
    $("#wrap img").first().fadeIn(1000);    
    setTimeout(rotateImg, 2000);
}

rotateImg();