Custom next button for slick slider

Question

I have on the page, there are two identical sliders, but they may be more. I need to make a custom button Next for each of sliders. I try to do so:

HTML

<div class="slider-wrap">
    <div class="slider">
        <div class="slider-item">Slide 1</div>
        <div class="slider-item">Slide 2</div>
        <div class="slider-item">Slide 3</div>
    </div>
    <button id="next">Next ></button>
</div>

<div class="slider-wrap">
    <div class="slider">
        <div class="slider-item">Slide 1</div>
        <div class="slider-item">Slide 2</div>
        <div class="slider-item">Slide 3</div>
    </div>
    <button id="next">Next ></button>
</div>

jQuery

$('.slider').slick({
    dots: true,
    nextArrow: $('#next')
});

Demo: http://codepen.io/fabric/pen/bwprxJ

Update: Second demo: http://codepen.io/fabric/pen/KgzZVz

If I click on the next button of the first slide, then the slide is changed of the second. And if the second, then nothing works. How to fix it?

Answer 1

Add unique ids+ class to each slider & navigation

$('.slider').slick({
  dots: true,
  nextArrow: $('#next')
});
$('.slider2').slick({
  dots: true,
  nextArrow: $('#next2')
});

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

for your second example you change the navigation id to a class

$('.slider').slick({
  dots: true
});

$('.next').click(function(){
  $(this).prev().slick('slickNext');
});

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

Answer 2

You should use unique ids for this

$('#slider1').slick({
 dots: true,
 nextArrow: $('#next1')
});
$('#slider2').slick({
 dots: true,
 nextArrow: $('#next2')
});

http://codepen.io/pranesh-r/pen/qakKNY

Answer 3

A more elegant solution might be to trigger off a class name, and then create nextArrow events for each instance of that class.

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

And change the button id's to classes. This has the added benefit of giving you a copy/paste'able template for variable amounts of sliders on a single page without having to create unique id's each time.

*edit: working solution http://codepen.io/nominalaeon/pen/gwAdjd