在同一個腳本上運行多個 vanilla 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

第一個是唯一滾動的，因為它是從document.querySelector('.carousel_track');返回的那個 . querySelector將僅返回第一個匹配項（如果未找到匹配項， null ）。 有關進一步參考，請參閱https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector 。

您可以使用querySelectorAll ( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll ) 來稍微調整一下以獲取所有匹配的元素。 使用 CodePen 中提供的 HTML，您可以使用.carousel查詢所有輪播，並使用現有的大部分 JS 設置每個輪播。 這是一個示例 - https://codepen.io/brianmarco/pen/WNdaNov 。