在单个页面上实现多个传送带

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两个转盘元素。