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

• 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

2 Answers 2

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>