JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<div class="fadein">
    <div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"><p>image1</p></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"><p>image2</p></div>
    <div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"><p>image3</p></div>
</div>

CSS

.fadein { position:relative; height:332px; width:500px; }
.fadein div {position:absolute;text-align:center;height:100%;}
.fadein p { position:absolute; bottom:0;width:100%;color:white;background-color:rgba(0,0,0,0.6);height:1em;padding-bottom:10px;}

JavaScript

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
}

$(function() {
    $('.fadein div:eq(0)').addClass("active");
    $('.fadein div:gt(0)').hide();
    setInterval(function() {
        $('.active:eq(0)').fadeOut().removeClass("active").nextOrFirst('div').addClass("active").fadeIn().end()
    }, 3000);
});