Ihor Tkachuk Ihor Tkachuk - 2 months ago 33
jQuery Question

Custom next button for slick slider

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

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

Comments