Question

我正在使用Slick Carousel，当我点击下一个或上一个按钮但只有第二个<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函数。

如果我尝试使用＃picture-container 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>

无法使用自定义导航控制多个div

1 个答案: