滑らかなスライダのカスタム次のボタン

Question

私はページ上に2つの同一のスライダがありますが、それ以上の場合もあります。私はそれぞれのスライダーのカスタムボタン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

最初のスライドの次のボタンをクリックすると、2番目のスライドのスライドが変更されます。そして2番目の場合は、何も動作しません。それを修正するには？

Answer 1

あなたはあなたがクラスに

$('.slider').slick({ 
    dots: true 
}); 

$('.next').click(function(){ 
    $(this).prev().slick('slickNext'); 
}); 

http://codepen.io/anon/pen/vXGAxb

Answer 2

をナビゲーションIDを変更する各スライダに+クラス2番目例えば&ナビゲーション

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

http://codepen.io/anon/pen/QKNxNj

をユニークなIDを追加あなたはすべきですこの

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

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

Answer 3

よりエレガントな解決策のためのidsユニークなSEは、クラス名をオフにトリガし、そのクラスのインスタンスごとに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を作成することなく、1ページに可変量のスライダのコピー/ペースト可能なテンプレートを追加できるという利点があります。

*編集：実用的な解決策http://codepen.io/nominalaeon/pen/gwAdjd