无法通过自定义导航控制多个div

Question

我正在使用滑动转盘，其中有两个<div>需要在单击下一个或上一个按钮时滚动，但只有第二个<div>正在滚动。这是我的HTML和jQuery：

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”位置。

Answer 1

我的建议是在您的＃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>