光滑的滑塊 appendArrows 到多個容器，除了最后一個箭頭不起作用

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

Answer 3

如果您在一個頁面中使用多個滑塊，您應該為此添加額外的腳本。

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