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 +类＆amp;导航

$('.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

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

3 个答案: