Multiple sliders makes a problem with the navigation

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

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

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

[ActionScripted]

@quantafire: I’ve been working around this issue by using a loop and passing selector context to appendArrows and appendDots:

    $('.slider).each(function() {
      $(this).slick({
        appendArrows: $('.slider__arrows', this),
        appendDots:   $('.slider__dots',   this),
        arrows: true,
        dots:   true
      });
    });

It looks like the arrows/dots append calls don’t scope things to the current carousel so if you pass a general selector like appendArrows: '.slider__arrows' it’ll append to all instances of .slider__arrows on the page and you’ll see what you’ve reported.

It might make sense to scope selectors to within the parent carousel to make things more intuitive to folks trying to implement and customize the carousel.

[projer-zz]

@jmelendev thanks for this solution. You can even simplify it like this:

$('.slider').each(function( index ) {
      $(this).attr('data-slider', index);

      $(this).slick({
        appendArrows: '[data-slider="' + index + '"] .slick-slide',
        appendDots:  '[data-slider="' + index + '"] .slick-slide',
        arrows: true,
        dots:   true
      });
    });