如何在此自动轮播滑块中显示当前图像下的下一张图像？

Question

我正在尝试使用 vanilla JS 制作一个全屏无限自动播放轮播。 我正在使用数组来存储图像。烦人的一点是，当图像幻灯片有一个简单的背景，我想看下一张图片。

我尝试在 CSS 文件中设置 2 个背景图像，但没有成功。有什么帮助吗？

在我的本地机器上，旋转木马旋转数组中的 3。目前它只显示“图像[0]”。不知道为什么。

// carousel gallery

const images = ["DSC02663.jpg", "DSC02664.jpg", "DSC02665.jpg"];

const carousel = document.querySelector(".slider");

const interval = setInterval(function () {
    startCarousel();
}, 5000);

function startCarousel() {
    let index = 0;
    let currentImage = `https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/${images[index]}`;
    carousel.style.backgroundImage = currentImage;
  
    carousel.classList.remove("slide");
    void carousel.offsetWidth;
    carousel.classList.add("slide")

    let newLastElement = images.shift();
    images.push(newLastElement);
}

.slider {
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-image: url(https://raw.githubusercontent.com/rossivk/ipc/main/assets/images/DSC02663.jpg);
}


.slide {
    -webkit-animation: 1.5s slide;
    animation: 5s slide;
}

@-webkit-keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100vw);
    }
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100vw);
    }
}

 <div class="slider slide">
    </div>