光滑的滑块附加箭头到多个容器，箭头（最后一个除外）不起作用

Question

我正在尝试将光滑的箭头附加到多个容器中。基本上，我需要每张幻灯片都有自己的导航。每张幻灯片都有

<div class="pixoff-slider-navigation-anchor"></div>

里面的某个地方。我的JS代码是

$('.pixoff-slider-container').slick({
    arrows: true
    ,appendArrows: $('.pixoff-slider-navigation-anchor')
});

这有效，并且将箭头附加到所有容器，但实际上只有最新的一组箭头有效。其他的只是在那里，当我们单击它们时什么也不做。

Answer 1

不要将箭头附加到dom上，而是在每张幻灯片中编写所需的html，然后在漂亮的选项中设置上一个和下一个箭头。

$('.pixoff-slider-container').slick({
        arrows: true,
        dots: false,
        prevArrow: $('.prev-arrow'),
        nextArrow: $('.next-arrow')
    });

<div class="pixoff-slider-navigation-anchor">
  <a class="prev-arrow">Prev</a>
  <a class="next-arrow">Next</a>
</div>

Answer 2

您需要将点击事件分配给导航按钮。

var slider = $('.pixoff-slider-container');

$('.pixoff-slider-navigation-anchor .slick-prev').on('click', function() {
  $(slider).slick('slickPrev');
});
$('.pixoff-slider-navigation-anchor .slick-next').on('click', function() {
  $(slider).slick('slickNext');
});