JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background1"></div>
<div id="background2"></div>

CSS

#background1{
    width: 500px;
    height: 300px;
    position: absolute;
}
#background2{
    width: 500px;
    height: 300px;
    position: absolute;
    z-index: -1;
}

JavaScript

var index = 0;
var imagesArray = ["https://placekitten.com/g/500/300", "https://placekitten.com/g/600/300", "https://placekitten.com/g/700/300"];
var background1 = $("#background1");
var background2 = $("#background2");

//Set the starting background
background2.css("background","url('"+ imagesArray[index] +"')");
setInterval(changeImage, 2000);

function changeImage(){
    //Make sure that the bottom element has the "old" background
    background2.css("background","url('"+ imagesArray[index] +"')");
    
    //Hide the top element which we will load the "new" background in now
    background1.hide();

    index++;
    if(index >= imagesArray.length){
        index = 0;
    }
    
    //Set the background of the top element to the new background
    background1.css("background","url('"+ imagesArray[index] +"')");
    //Fade in the top element
    background1.fadeIn();
}