滑动滑块的自定义下一个按钮答案

【问题标题】：Custom next button for slick slider滑动滑块的自定义下一个按钮
【发布时间】：2016-09-15 10:14:54
【问题描述】：

我在页面上有两个相同的滑块，但可能更多。我需要为每个滑块制作一个自定义按钮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

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

【问题讨论】：

codepen.io/anon/pen/QKNxNj

标签： javascript jquery html slick.js

【解决方案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

【讨论】：

很遗憾，我无法添加id！添加了第二个演示。

【解决方案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

【讨论】：

【解决方案3】：

您应该为此使用唯一的ids

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

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

【讨论】：

为什么不使用类？
更新了答案。 jQuery 将选择第一个 id 并忽略其余的同名。