JSFiddle - React, Tailwind, and code Playground

by jexperton

HTML

<body>
    <div id="banner-wrapper3" class="bk bk_0 "></div>
</body>

CSS

#banner-wrapper3 {
    background: black;
}
.image {
    position: absolute;
    width: 300px;
    height: 200px;
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}

JavaScript

$(document).ready( function () {
    var images = [
        'http://upload.wikimedia.org/wikipedia/commons/8/8e/Solna_Brick_wall_Stretcher_bond_variation1.jpg',
        'http://cdn.designinstruct.com/files/406-free_high_quality_concrete_wall_textures/concrete_wall_texture_01_designinstruct.JPG'],
        loop = 0,
        home = $('#banner-wrapper3');
    
    // Initialisation des images
    for (var i = 0; i < images.length; i++) {
        var div = $('<div class="image"></div>'),
            value = 'url(' + images[i] + ')';
        div.css({
            'background-image': value
        });
        home.append(div);
    }

    function fader() {
        setTimeout(function () {
            if ( home.children().eq(loop + 1).length !== 0 )
            {
                home.children().eq(loop + 1).fadeIn(2000);
            }
            else
            {
                home.children().eq(0).fadeIn(2000);
            }
            
            home.children().eq(loop).fadeOut(2000);

            if (loop < images.length - 1) {
                loop++;
            } else {
                loop = 0;
            }

            fader();

        }, 4000);
    }

    fader();

})();