I am trying to display a slideshow of images from an array using a promise. On load, I want the page to display the first image, then the next, and so on. When it's at the last picture index, I want the first picture to display and the code to keep repeating.
The class '.show-image' is visibility: visible. I have the first picture index classed as '.show-image', but the rest are hidden.
Is there a cleaner way of writing this without having so many IF statements?
let pictures= document.querySelectorAll(".moving-pics img");
async function changePicture() {
for (let x=0; x < pictures.length; x++) {
await new Promise(resolve => {
setTimeout(() => {
if (!pictures[x - 1]) {
pictures[pictures.length - 1].classList.remove('show-image');
}
if (pictures[x - 1] && pictures[x - 1].classList.contains('show-image')) {
pictures[x - 1].classList.remove('show-image');
}
pictures[x].classList.add('show-image');
if (!pictures[x + 1]) {
resolve();
changePicture();
}
resolve()
}, 3000)
});
}
}
Aucun commentaire:
Enregistrer un commentaire