JSFiddle - React, Tailwind, and code Playground

by babumxx

HTML

<div class="image-container"></div>

JavaScript

(function(){
 var srcs = [
"/images/options/family_4.jpg",
"/images/options/family_5.jpg",
"/images/options/family_3.jpg"
];
var links = [
"http://google.com",
"http://youtube.com",
"http://yahoo.com"
];

var currentIndex = srcs.length-1;
var changeBanner = function(){
    if(currentIndex == 0){
        da.jQuery(".banner-fade-img").fadeIn();
        currentIndex = srcs.length-1;
    } else {
        da.jQuery(da.jQuery(".banner-fade-img").get(currentIndex)).fadeOut();
        currentIndex--;
    }
}

var bannerSetup = function(){
_.each(srcs, function(src, index){
    da.jQuery(".image-container").append("<img class='banner-fade-img' style='top:0px;position:absolute; z-index:"+(index+2)+";' src=' "+src+"'></img>");

})
window.setInterval(changeBanner, 5000);
}

bannerSetup();
}())