JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<div id="slidesPartenairesHome">
        <div id="imags">
        </div>
    </div>

CSS

#slidesPartenairesHome
        {
            margin-left: 120px;
        }
        #slidesPartenairesHome, #imags
        {
            background-size: contain;
            background-position: center center;
            width: 300px;
            height: 170px;
        }

JavaScript

$(function () {
            var arrayOfPartenaires = [
            "http://fotos2013.cloud.noticias24.com/animales1.jpg",
            "http://www.schnauzi.com/wp-content/uploads/2013/03/animales-en-primavera.jpg",
            "https://johannagrandac.files.wordpress.com/2015/01/conejos.jpg",
             "http://png-4.findicons.com/files/icons/1035/human_o2/128/face_smile.png",
            "http://icons.iconarchive.com/icons/rokey/the-blacy/128/big-smile-icon.png",
            "http://simpleicon.com/wp-content/uploads/smile-256x256.png"
        ];
            var loaders = 0;
            function cycleImages() {
                var element = arrayOfPartenaires[loaders];
                $("#imags").css({ 'background-image': 'url(' + element + ')' }).animate({ opacity: 1 }).hide().fadeIn("slow");
                if (loaders < arrayOfPartenaires.length) {
                    loaders = loaders + 1;
                    if (loaders >= arrayOfPartenaires.length) {                        
                        loaders = 0;
                    } 
                }
                else {
                    loaders = 0;
                }
                console.log(loaders, arrayOfPartenaires[loaders]);
            }
            cycleImages();
            setInterval(function () { cycleImages() }, 3000);
        });