自定义下一个按钮，用于滑动滑块

Question

我在页面上有两个相同的滑块，但它们可能更多。 我需要为每个滑块创建一个自定义按钮Next 。 我试着这样做：

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

演示： http ： //codepen.io/fabric/pen/bwprxJ

更新：第二个演示： http ： //codepen.io/fabric/pen/KgzZVz

如果我单击第一张幻灯片的下一个按钮，则更改第二张幻灯片。 如果第二个，那么没有任何作用。 怎么解决？

Answer 1

为每个滑块和导航添加唯一ID +类

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

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

对于第二个示例，您将导航ID更改为类

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

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

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

Answer 2

您应该使用唯一的ids

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

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

Answer 3

更优雅的解决方案可能是触发类名，然后为该类的每个实例创建nextArrow事件。

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

并将按钮ID更改为类。 这样做的另一个好处是可以在单个页面上为可变数量的滑块提供复制/粘贴模板，而无需每次都创建唯一的ID。

*编辑：工作解决方案http://codepen.io/nominalaeon/pen/gwAdjd