I am trying to append slick arrows to multiple containers. Basically, I need every slide to have its own navigation. Every slide has

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

somewhere inside it. My JS code is

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

This works, and it appends arrows to all the containers, but only latest set of arrows actually works. Other ones are just there and do nothing when we click on them.

I am trying to append slick arrows to multiple containers. Basically, I need every slide to have its own navigation. Every slide has

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

somewhere inside it. My JS code is

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

This works, and it appends arrows to all the containers, but only latest set of arrows actually works. Other ones are just there and do nothing when we click on them.

• javascript
• jquery
• slick.js

Share Improve this question Follow edited Aug 29, 2018 at 9:13 Bahman Parsa Manesh 2,37033 gold badges1818 silver badges3636 bronze badges asked Aug 29, 2018 at 8:39 Milos911Milos911 43344 gold badges99 silver badges2121 bronze badges 2

• What is the click event for anchors? – Milind Anantwar Commented Aug 29, 2018 at 8:44
• I get what you are asking, but I am not sure how to check that? @MilindAnantwar – Milos911 Commented Aug 30, 2018 at 7:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you are using several slider in one page, you should add additional script for this.

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

and HTML looks like this

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

Instead of appending the arrow to the dom, write the html you want in each slide and then set the prev and next arrows in your slick options.

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