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

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