滑动滑块的自定义下一步按钮

向每个滑块添加唯一的ids+class;航行

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

一个更优雅的解决方案可能是触发类名,然后为该类的每个实例创建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

您应该使用唯一的 ids 为了这个

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

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