JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="ad">
    <img src="http://animal.discovery.com/mammals/cheetah/pictures/cheetah-picture.jpg" alt="" class="active" />
    <img src="http://www.funatiq.com/images/best-bike-picture.jpg" alt="" />
    <img src="http://www.en.uni-muenchen.de/news/newsarchiv/Bilder/web_bilder_l/_9_l.jpg" alt="" />
</div>

CSS

@charset "UTF-8";


.ad{
    height:300px; 
    width:250px; 
    margin:0 1em 1em 0; 
    position:relative;
}

.ad img {
    position: absolute;
    transition:opacity 1s linear; 
    -moz-transition:opacity 1s linear; 
    -webkit-transition:opacity 1s linear;
}

.ad img{
    opacity: 0; 
}

.ad img.active{
    opacity: 1;
}

JavaScript

$(document).ready(function() {

function play() {
    setInterval(function(){
        var next = $(".ad .active").removeClass("active").prev("img");
        if (!next.length) {
            next = $(".ad img:last");
        }
        next.addClass("active");
    }, 3000);
}
play();

});