在單個頁面上實現多個傳送帶

Question

因此，我正在構建一個需要包含多個傳送帶的網頁。我已經成功創造了第一個旋轉木馬，但一直未能破解創造任何其他的東西。

我一直在關注Christian Heilmann的Javascript輪播指南，一切都很順利，直到我試圖在同一頁面上放置2個輪播。

由於js正在影響類，我認爲現有的js會影響副本。這裏的工作輪播looks和這裏是如何破碎輪播looks。

任何有關如何去做這件事的最佳途徑的建議都會很棒，如果可能的話，我很樂意保留在香草js中。謝謝你的幫助！

而這裏的更新JS：

carousel = function(id) { 
    var box = document.querySelector(id + ' .project-pictures'); 
    var next = box.querySelector(id + ' .next'); 
    var prev = box.querySelector(id + ' .prev'); 
    var items = box.querySelectorAll(id + ' .content li'); 
    var counter = 0; 
    var amount = items.length; 
    var current = items[0]; 

    box.classList.add('active'); 

    function navigate(direction) { 
    current.classList.remove('current'); 
    counter = counter + direction; 
    if (direction === -1 && 
     counter < 0) { 
     counter = amount - 1; 
    } 
    if (direction === 1 && 
     !items[counter]) { 
     counter = 0; 
    } 
    current = items[counter]; 
    current.classList.add('current'); 
    } 
    next.addEventListener('click', function(ev) { 
    navigate(1); 
    }); 
    prev.addEventListener('click', function(ev) { 
    navigate(-1); 
    }); 
    navigate(0); 
}(); 

carouselA = carousel('#carousel-a'); 
carouselB = carousel('#carousel-b'); 

注：受影響的DIV是的.project畫面。

感謝您的回覆！我仍然沒有得到傳送帶工作 - 它在上面的不工作的屏幕截圖中看起來是相同的，我覺得我錯過了一些非常基本的東西，這裏是html的參考，我已經更新了上面的js以反映你的建議：

<div id="carousel-a"> 
    <div class="project-pictures"> 

    <ol class="content"> 
    <li><img src="images/portfolio_img/design_museum/cropped/1.png"> 
    </li> 
    </ol> 
    <div class="buttons"> 
    <button class="prev">  
    </button> 
    <button class="next"> 
     <span class="offscreen">Next</span> ▶ 
    </button> 
    </div> 
</div></div> 

Answer 1

你是在正確的軌道說影響css類應用於兩個輪播的JavaScript。

你需要做的是區分兩個輪播。一種方法是爲每個輪播創建一個唯一的ID。

例如

carousel = function(id) { 
    var box = document.querySelector(id + ' .project-pictures'); 
    var next = box.querySelector(id + ' .next'); 
    var prev = box.querySelector(id + ' .prev'); 
    var items = box.querySelectorAll(id + ' .content li'); 
    // ... 
}; 

carouselA = carousel('#carousel-a'); 
carouselB = carousel('#carousel-b'); 

而在你的HTML代碼，插入相應的ID兩個轉盤元素。