Use JQuery to enable multiple background images for a div with the images being displayed at a specified interval

div-with-multiple-background-images.js

// Tested with jQuery v3.3.1
$( document ).ready(function() {

    var doVisualUpdates = true;

    document.addEventListener('visibilitychange', function(){
        doVisualUpdates = !document.hidden;
    });

    // code below changes the background every 10 seconds for the div with id back-overlay-slider

    var i =0; 
    var images = [
        'assets/img/backgrounds/aug-2022/pexels-luis-gomes-546819.jpg',
        'assets/img/backgrounds/aug-2022/pexels-pavel-danilyuk-8038330.jpg',
        'assets/img/backgrounds/aug-2022/pexels-pixabay-289738.jpg'
    ];
    var image = $('#back-overlay-slider');
    image.css('background-image', 'url(assets/img/backgrounds/aug-2022/pexels-pixabay-289738.jpg)');
    setInterval(function(){

        if (!doVisualUpdates) { return; }

        image.fadeOut(1000, function () {
            image.css('background-image', 'url(' + images [i++] +')');
            image.fadeIn(1000);
        });

        if(i === images.length) {
            i = 0;
        }
    }, 10000);            
});