在同一个脚本上运行多个 vanilla JS 轮播

Question

I want to have two independent image carousels, stacked on top of each other. I thought making both of them with the same class would make them both work from the same script - but only the first one scrolls. Is it because of the array variable?

window.onload = function(){
    var track = document.querySelector('.carousel_track');
    var slides = Array.from(track.children);

function setSlidePosition (slide, index) {
    slide.style.left = slideSize * index + 'px';
};
slides.forEach(setSlidePosition);

function moveToSlide (track, currentSlide, targetSlide){
    track.style.transform = 'translateX(-' + targetSlide.style.left + ')';
    currentSlide.classList.remove('current-slide');
    targetSlide.classList.add('current-slide');
};

Here is the codepen: https://codepen.io/beseu/pen/RwxebYy

Answer 1

The first one is the only one that is scrolling as that is the one returned from document.querySelector('.carousel_track');. querySelector will only return the first match ( null if no match is found). See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for further reference.

You could tweak things a bit by using querySelectorAll ( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll ) to get all matching elements. With the HTML provided in the CodePen, you could query for all carousels with .carousel , and set each one up using most of your existing JS. Here's an example - https://codepen.io/brianmarco/pen/WNdaNov .