How to show next image under current one in this Automatic Carousel Slider?

Question

I am trying to make an Infinite Autoplay Carousel, full screen using vanilla JS. I am using an array to store the images. The annoying bit is that when the image slide there is a plain background and I would like to see the next image.

I have tried setting 2 background images in the CSS file but didn't work. Any help, please?

On my local machine, the carousel rotates the 3 from the array. At the moment it shows only 'images[0]'. Not sure why.

// 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 = `url(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>

Lee · Answer 1 · 2023-03-18T14:03:18.417

You need to add url() to the string when you set carousel.style.backgroundImage . Also consider re-ordering initial array so first image doesn't repeat:

// carousel gallery

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

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

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


function startCarousel() {
    let index = 0;
    let currentImage = `url(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>

@RokoC.Buljan it is to upload on a tv screen to run in a loop. I did it with a fade effect but think it will work better if the images slides. — RossiVK, Mar 18 '23 at 14:21
@RokoC.Buljan Solves OP's immediate problem, allowing step by step progress. — Lee, Mar 18 '23 at 14:22

How to show next image under current one in this Automatic Carousel Slider?

1 Answers1