用於滑動滑塊的自定義下一個按鈕

我在頁面上有兩個相同的滑塊，但它們可能更多。我需要爲每個滑塊製作一個自定義按鈕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

如果我點擊第一張幻燈片的下一個按鈕，則第二張幻燈片會改變。如果第二個，那麼沒有任何工作。如何解決它？

來源

2016-09-15 Ihor Tkachuk

它是獨特的！ – madalinivascu

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

添加唯一的ID +類，每個滑塊&導航

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

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

你的第二個例子中，你改變導航標識一類

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

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

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

來源

2016-09-15 10:21:23 madalinivascu

不幸的是，我無法添加ID！增加了第二個演示。 –

謝謝，第二個版本正常工作！ –

你你應該SE這

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

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

來源

2016-09-15 10:24:39

爲什麼不使用類？ – madalinivascu

更新了答案。 jQuery將選擇第一個id並忽略其他同名。 –

更好的解決方案的獨特ids可能是牽一髮而動類名，然後創建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

來源

2016-09-15 13:04:06 NominalAeon

用於滑動滑塊的自定義下一個按鈕

回答

相關問題