Javascript Can'；t使用自定义导航控制多个div

我使用的是Slick Carousel，其中有两个

需要在单击下一个或上一个按钮时滚动，但只有第二个

在滚动。以下是我的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:

我正在使用jquery3.0.0。只有“下一行”在滚动，而上一行不在滚动

图像通过一个Ajax调用动态加载，然后调用我的JQuery函数

---

如果我尝试使用#图片容器ID，我根本无法单击箭头，但可以拖动幻灯片。但是，当我以这种方式拖动幻灯片时，它不会停留在我拖动幻灯片的位置，它会重置回“0”位置。

我的建议是在您的#gallery容器上调用.slick（）。还可以让Slick添加导航按钮本身，而不是硬编码它们。在我的示例中，我去掉了一堆标记，并相应地修改了javascript。这是一个工作原理图

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>'
});

$（“#画廊容器”）。光滑({
点：错，
无限：是的，
速度:300,，
幻灯片放映：1，
可变宽度：true，
下一行：''，
前箭头：“”
});

HTML:

$('#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>'
});

<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>