JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div id="imageRotator">
    <img src="http://i47.tinypic.com/mtxpcl.jpg" />
    <img src="http://wadaphoto.jp/kikou/images2/hokuo008l.jpg" />
    <img src="http://i46.tinypic.com/2vjq4bt.jpg" />
    <img src="http://wadaphoto.jp/kikou/images4/buraito29l.jpg" />
    <img src="http://www.alohafrom808.com/wp-content/uploads/2011/06/peles_group_top_pano_sm.jpg" />
</div>

CSS

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

#imageRotator img {
    position:absolute;
    top: 0;
    left: 0;
    display:none;
    width:100%;
    z-index: 1;
}

JavaScript

function rotateImg() {
    $("#imageRotator img").first().appendTo('#imageRotator').fadeOut(1500);
    $("#imageRotator img").first().fadeIn(1500);
    setTimeout(rotateImg, 5000);
}

rotateImg();