JSFiddle - React, Tailwind, and code Playground

by nicholaschris

HTML

<div id="slideshow">
    <div>
        <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
    </div>
    <div>
        <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
    </div>
    <div>Pretty cool eh? This slide is proof the content can be anything.</div>
</div>
<div class='red'></div>

CSS

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

.red {
    height:200px;
    width:2000px;
    background: red;
}
}

JavaScript

$(document).ready(function () {

    $("#slideshow > div:gt(0)").hide();

    setInterval(function () {
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
    }, 3000);


});