JSFiddle - React, Tailwind, and code Playground

by CroaToa

HTML

<div class="imgHolder first"></div>
<div class="imgHolder second"></div>
<div class="anyclassname"></div>

CSS

body, html {
    height: 100%;
}
.imgHolder {
    position: absolute;
    top: 0;
    opacity: 0;
    visibility: hidden;
    width: 100%;
    height: 100%;
    -webkit-transition: all 2s ease-in;
    transition: all 2s ease-in;
    background: url('http://lorempixel.com/output/technics-q-c-350-350-10.jpg');
    background-size: cover;
}
.imgHolder.first {
    background: url('http://lorempixel.com/output/technics-q-c-350-350-10.jpg');
    background-size: cover;
}
.imgHolder.second {
    background: url('http://lorempixel.com/output/animals-q-c-350-350-5.jpg');
    background-size: cover;
    background-attachment: fixed;
}
.imgHolder.active {
    opacity: 1;
    visibility: visible;
    background-attachment: fixed;
}

JavaScript

var $imgHolder = $('.imgHolder');

$imgHolder.first().addClass('active');

setInterval(function(){
    var $next = $('.imgHolder.active').removeClass('active').next('.imgHolder');
    if ($next.length) {
        $next.addClass('active');
    } else {
        $imgHolder.first().addClass('active');
    }
}, 5000);