光滑的滑块将箭头附加到多个容器，除了最后一个之外，箭头不起作用答案

【问题标题】：Slick slider appendArrows to multiple containers, arrows not working except last one光滑的滑块将箭头附加到多个容器，除了最后一个之外，箭头不起作用
【发布时间】：2018-08-29 08:39:23
【问题描述】：

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

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

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

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

这可行，它会将箭头附加到所有容器中，但只有最新的一组箭头真正有效。其他的就在那里，当我们点击它们时什么也不做。

【问题讨论】：

锚点的点击事件是什么？
我明白你在问什么，但我不知道如何检查？ @MilindAnantwar

标签： javascript jquery slick.js

【解决方案1】：

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

$('.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>

【讨论】：

【解决方案2】：

如果您在一页中使用多个滑块，您应该为此添加额外的脚本。

$(window).on("load resize orientationchange", function () {
    $(".slider").each(function () {
        var slider = $(this);
    
        slider.slick({
            centerMode: false,
            centerPadding: '60px',
            arrows: true,
            dots: true,
            slidesToShow: 3,
            autoplay: true,
            prevArrow: slider.parent().find('.btnPrev'),
            nextArrow: slider.parent().find('.slider__btnNext'),
            
        });
    });
});

HTML 看起来像这样

<div class="sliderParent">
    <button class="btnPrev"></button>
    <button class="btnNext"></button>
    <div class="slider">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
        <div class="item">d</div>
    </div>
</div>

【讨论】：

【解决方案3】：

您需要为导航按钮分配一个点击事件。

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

【讨论】：