JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<img class="fade" src="http://jaarverslag.monuta.nl/mediabank/achtergrondfotos/johnCF006178.jpg" /> 
<img class="fade" src="http://jaarverslag.monuta.nl/mediabank/achtergrondfotos/herlinaCF006604.jpg" />
<img class="fade" src="http://jaarverslag.monuta.nl/mediabank/achtergrondfotos/agnesCF006045.jpg" /

CSS

.fade{position:absolute;}

JavaScript

//background image fader
var fadeDuration = 2000;
var slideDuration = 4000;
var currentIndex = 1;
var nextIndex = 1;
$(document).ready(function() {
    $('img.fade').css({
        opacity: 0.0
    });
    $("'img.fade:nth-child(" + nextIndex + ")'").addClass('show').animate({
        opacity: 1.0
    }, fadeDuration);
    var timer = setInterval('nextSlide()', slideDuration);
})

function nextSlide() {
    if($('img.fade').length > 1){
        nextIndex = currentIndex + 1;
        if (nextIndex > $('img.fade').length ) {
            nextIndex = 1;
        }
        $("'img.fade:nth-child(" + nextIndex + ")'").addClass('show').animate({opacity: 1.0}, fadeDuration);
        $("'img.fade:nth-child(" + currentIndex + ")'").animate({opacity: 0.0}, fadeDuration).removeClass('show');
        currentIndex = nextIndex;
    }
}