JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="container">
    <img src="http://2.bp.blogspot.com/-CdJOb6MbjAI/UXVYxT8zUlI/AAAAAAAAAJM/TR4qdV-wJZk/s1600/desktop hd wallpapers 456.jpg"> 
        <img src="http://2.bp.blogspot.com/_HzAThb2RgMc/TP0ksm-MjrI/AAAAAAAACoo/wy5nLEw1skM/s1600/1.jpg">
        <img src="http://1.bp.blogspot.com/-PXBjhC6_4Ms/UmuxG19eipI/AAAAAAAAAto/50xAjOg2pwM/s1600/hd wallpapers 1080p nature love__006.jpg">
            <img src="http://4.bp.blogspot.com/-ws_yDSzjtcA/Tj6UOoBQY-I/AAAAAAAAABc/PK767AZbyFE/s1600/nature-wallpaper-hd-1080p.jpg">
                <img class="active" src="http://2.bp.blogspot.com/_ioD6UOQqcyA/SwSUhg-hycI/AAAAAAAAAnk/eXpJSJ1ibkg/s1600/01356_crepuscule_1920x1080.jpg">
                    <img src="http://3.bp.blogspot.com/_kw1VD16J_Xw/SnLHkTadzQI/AAAAAAAACZE/P_jFReJiDQw/s1600/HDTV_lakelouise_1920x1080.jpg">
                <img src="http://3.bp.blogspot.com/-vG8tnDQbEPM/T9Y3_TSWvGI/AAAAAAAAA2A/8Wn4sri3Bzg/s1600/1080p-hd-wallpaper-4.jpg">
</div>

CSS

img {
    width: 600px;
    height: 500px;
    position: absolute;
    display: none;
}
.active {
    display:block;
}

JavaScript

$(function(){
    function loadEffects(){
        var noOfImages = $('#container img').length;
        var currentIndex = $('.active').index();
        var nextIndex = ((currentIndex+1) < noOfImages) ? (currentIndex+1) : 1;
        $('.active').fadeOut(6000).removeClass('active');
        $('#container img:eq('+nextIndex+')').fadeIn(6000).addClass('active');
    }
    setInterval(loadEffects,10000);
});