JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgRotator"></div>

CSS

#imgRotator {
    width: 100%;
    height: 500px;
    background: url(http://www.uthemes.com/dev/wp-content/themes/uthemes/theme/assets/img/large-crowd-bg.jpg) no-repeat top center;
}

JavaScript

// Create image array

    var imgArr = new Array(
        'http://www.uthemes.com/dev/wp-content/themes/uthemes/theme/assets/img/large-crowd-bg.jpg',
        'http://www.uthemes.com/dev/wp-content/themes/uthemes/theme/assets/img/large-home-bg.jpg'
    );

// Cretea a empty array for preloading

    var preloadArr = new Array();
    var i;
 
// Preload images

    for (i  =0; i < imgArr.length; i++)
    {
        preloadArr[i] = new Image();
        preloadArr[i].src = imgArr[i];
    }

// Define variables for rotator

    var currImg = 1;
    var intID = setInterval(changeImg, 6000);
 
// Rotate image

    function changeImg()
    {
        $('#imgRotator').animate({ opacity: 0 }, 300, function()
        {
            $(this).css('background', 'url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
        }).animate({ opacity: 1 }, 300);
    }