同一脚本上的多个香草 JS 轮播运行

Question

我想要两个独立的图像轮播，彼此堆叠。我认为用相同的 class 制作它们会使它们都在同一个脚本中工作——但只有第一个滚动。是数组变量的原因吗？

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');
};

这是代码笔：https://codepen.io/beseu/pen/RwxebYy

Answer 1

第一个是唯一滚动的，因为它是 return 编辑自 document.querySelector('.carousel_track'); 的那个。 querySelector 只会 return 第一个匹配项（null 如果没有找到匹配项）。请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector 以获取更多参考。

您可以使用 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 .

同一脚本上的多个香草 JS 轮播运行

Multiple vanilla JS carousels running on same script

javascript

carousel

同一脚本上的多个香草 JS 轮播 运行

Multiple vanilla JS carousels running on same script

javascript

carousel

同一脚本上的多个香草 JS 轮播运行