Slick: Multiple sliders makes a problem with the navigation

[quantafire]

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?

[leggomuhgreggo]

Hey @quantafire can you recreate in a reduced test case like a jsfiddle or codepen? See the contribution guidelines. Thanks

Closing pending test case

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

[transbetacism]

_madalin ivascu_ solution on stackoverflow worked for me:
http://stackoverflow.com/questions/39508533/custom-next-button-for-slick-slider

http://codepen.io/anon/pen/vXGAxb

[jmelendev]

Late to the conversation but for anyone else looking for answers, This worked for me:

 var index = 0;

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

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

I had to add the arrows and dots into the slide for this particular design.

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

[Sisanu]

Not all the slick configurations are appending the navigation as a child element of the carousel, some are appending this as a sibling of the slides wrapper (for styling purpose perhaps). In this case, you have to target the element differently.

$('.slider').each(function() {
    $(this).slick({
        ...
        appendArrows: $(this).siblings('.slick-nav'),
        ...
    });
});

[sadig2]

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

Thank you so much man