为光滑的滑块自定义下一个按钮

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>

查询

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

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

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

如果我单击第一张幻灯片的下一个按钮，则幻灯片将更改为第二张。如果是第二个，则没有任何效果。如何解决？

原文由 Ihor Tkachuk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 madalinivascu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

原文由 NominalAeon 发布，翻译遵循 CC BY-SA 3.0 许可协议