fadeIn, fadeOut и timeInterval для слайдера фонового изображения

Question

Почему это не работает часовой механизм? Я перепробовал все разные милисекунды, и скрипт не будет переводиться в то, что я хочу (каждый фон в виде слайда каждые несколько фиксированных секунд). Спасибо!

$(document).ready(() => {

    function slider() {
        $('#background-one').fadeIn(1000, function() {
            $('#background-one').delay(2000).fadeOut(1000, function() {
                $('#background-two').fadeIn(1000, function() {
                    $('#background-two').delay(2000).fadeOut(1000, function() {
                        $('#background-three').fadeIn(1000, function() {
                            $('#background-three').delay(2000).fadeOut(1000, function() {
                                $('#background-four').fadeIn(1000, function() {
                                    $('#background-four').delay(2000).fadeOut(1000)
                                })
                            })
                        })
                    })
                })
            })
        })
    }

    setInterval(slider, 8000);

    slider();

})

ОБНОВЛЕНИЕ!

Я работал над методом, основанным на this .

Вот это индекс. html

<div id="main-container">

    <div id="left-selector"><</div>
    <div id="right-selector">></div>

    <div id="back-img-1"></div>
    <div id="back-img-2"></div>
    <div id="back-img-3"></div>
    <div id="back-img-4"></div>

</div>

Вот стиль. css

#back-img-1, #back-img-2, #back-img-3, #back-img-4 {
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

#back-img-1 {
    background-image: url('./img/aopoi.jpg');
}

#back-img-2 {
    background-image: url('./img/nanduti.jpg');
    display: none;
}

#back-img-3 {
    background-image: url('./img/encaje.jpg');
    display: none;
}

#back-img-4 {
    background-image: url('./img/jeans.jpg');
    display: none;
}

И, наконец, рабочий кусок кода!

$(document).ready(() => {

let numImages = 4;
let currentImage = 1;

function changeImage() {
    $('#back-img-' + currentImage).fadeOut(1000, function() {
        if (currentImage === numImages) {
            currentImage = 0;
        }
        currentImage++;
        $('#back-img-' + currentImage).fadeIn(1000, function() {
            changeImage();
        });
    })
}

changeImage();

})