無法通過自定義導航控制多個div

我正在使用滑動轉盤，其中有兩個<div>需要在單擊下一個或上一個按鈕時滾動，但只有第二個<div>正在滾動。這是我的HTML和jQuery：無法通過自定義導航控制多個div

JQuery的：

var test = $('.slider').slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    variableWidth: true, 
    prevArrow: $("#left-arrow"), 
    nextArrow: $("#right-arrow") 
}); 

$("#right-arrow").on('click', function() { 
    test.slickNext(); 
}); 
$("#left-arrow").on('click', function() { 
    test.slickPrev(); 
});

HTML：

<div id="gallery-container" class="center"> 
    <div id="left-arrow"><img src="./resources/gallery-arrow.png" alt="Scroll Left" /></div> 
    <div id="picture-container"> 
     <div class="upper-row carousel slider"></div> 
     <div class="lower-row carousel slider"></div> 
    </div> 
    <div id="right-arrow"><img src="./resources/gallery-arrow.png" alt="Scroll Left" /></div> 
</div>

我使用JQuery 3.0.0。只有「下排」滾動，上排不是。

圖像通過Ajax調用動態加載，然後調用我的JQuery函數。

如果我嘗試使用＃圖片容器ID，我不能點擊箭頭，但我可以拖動幻燈片。但是，當我用這種方式拖動幻燈片時，它不會留在我拖動到的位置，而是會重置回「0」位置。

來源

2016-07-14 Bryan

我的建議是在您的＃gallery-container上調用.slick（）。也讓Slick在導航按鈕本身中添加，而不是硬編碼它們。我已經在我的例子中刪除了一堆標記，並相應地修改了javascript。這是一個JSFiddle它的工作。

的jQuery：

$('#gallery-container').slick({ 
    dots: false, 
    infinite: true, 
    speed: 300, 
    slidesToShow: 1, 
    variableWidth: true, 
    nextArrow: '<button><i class="fa fa-angle-right"></i></button>', 
    prevArrow: '<button><i class="fa fa-angle-left"></i></button>' 
});

HTML：

<div id="gallery-container" class="center"> 
    <div class="upper-row carousel slider"> 
    <img src="http://unsplash.it/500/500?image=300" alt=""> 
    </div> 
    <div class="lower-row carousel slider"> 
    <img src="http://unsplash.it/500/500?image=400" alt=""> 
    </div> 
</div>

來源

2016-07-15 19:25:50 mhigley

無法通過自定義導航控制多個div

回答

相關問題