fadeIn, fadeOut and timeInterval for background image slider

Why is this not working clockwork? I have tried all differents miliseconds and the script won't translate into what I want (every background as a slide every some fixed seconds). Thanks!

$(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();

})

UPDATE!

I worked around a method based on this.

Here it is index.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>

Here it is style.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;
}

And finally the working piece of code!

$(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();

})