Slick.js appendarrows doesn't work for multiple carousels

Question

I am using the Slick jQuery carousel and I have a problem whenever I use the "appendArrows" option:

$(document).ready(function(){
  $('.post-slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 1,
    appendArrows: '.button-container',
    centerMode: true
});
});

You see, I need to output multiple carousels and yet the number of carousels I display is also the number of times the appendArrows function seems to run inside each carousel.

<div id="slidersort">
<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>News</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>Weather</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

<div class="slider">
    <span class="drag-handle">☰</span>
    <div class="wrap_lined_header"><h2>Sports</h2><div class="button-container"></div></div>

    <div class="clr"></div>
    <div class="post-slider">
        <?php 
        $args = array('post_type' => 'news');
        $loop = new WP_Query( $args );

        while ( $loop->have_posts() ) : $loop->the_post();
        ?>
        <div>
            <a class="post-link" href="<?php the_permalink() ?>"> </a>
            <h2><?php the_title(); ?></h2>
            <div class="post-date"><?php the_date('d/m/Y') ?></div>
            <div class="entry-content">
                <p><?php the_field('summary'); ?></p>
            </div>
        </div>
        <?php endwhile;?>

    </div>
</div>

So let's say I have 3 carousels displaying (as above), whenever I display the page, it returns me 3 buttons like this:

<div class="button-container">
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button">Previous</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button">Next</button>
</div>

Any ideas on how I can alter the original jQuery call to play nice with 3 carousels? I was thinking how I could get the appendArrows option to display only the BEGINNING of a class name then I could run a simple PHP loop to add numerical values to each of them, but I'm afraid my jQuery isn't that up to scratch.

Unless you have a better idea?

Skew

Best thing I found was to make sure that each of the .button-container elements had their own unique class or ID. Then it worked. Choosing the same class caused lots of trouble. Oh what a n00b I was back then... – Skew

Answer 1

Looks like this is an old question, but here is my solution in case someone comes across this same problem. What I did was initialize each element, and then use $(this) to traverse up and select the element.

$( document ).ready( function() {
    $( '.post-slider' ).each( function() {
        $( this ).slick( {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 2,
            slidesToScroll: 1,
            appendArrows: $(this).parents('.slider').find('.button-container'),
            centerMode: true
        } );
    } );
} );

Abessive

Answer 2

I used the following solutions which finds each navigation custom arrow from the slider wrapper.

$('.slider-wrap').each(function (index, sliderWrap) {
    var $slider = $(sliderWrap).find('.slider');
    var $next = $(sliderWrap).find('.next');
  var $prev = $(sliderWrap).find('.prev');
    $slider.slick({
        dots: true,
      slidesToShow: 2.5,
        nextArrow: $next,
      prevArrow: $prev
    });
});

View Pen by Noah Rodenbeek here: https://codepen.io/nominalaeon/pen/gwAdjd

Banna