油滑滑块 - 有条件的滑动导航

Question

我设法风格/显示我的滑盖导航使用：

$('.next-button-slick').click(function(){ 
$('.accmd-slides').slick("slickNext"); 
}); 
$('.prev-button-slick').click(function(){ 
$('.accmd-slides').slick("slickPrev"); 
}); 

的想法是使用字体真棒图标自定义导航，但有对我来说，禁用通道/如果滑块中没有“下一张”或“上一张”幻灯片，请更改导航箭头的样式？

谢谢你帮我出

Answer 1

如果没有一个或下一个幻灯片，它应该是第一个幻灯片或最后一张幻灯片。所以很简单，您可以在第一张幻灯片或上一张幻灯片中更改样式。

您需要使用afterChange事件，此事件在幻灯片更改时触发。在这种情况下，当前幻灯片是第一张还是最后一张时，您可以更改导航箭头的样式。

$('.multiple-items').on('afterChange', function(event, slick, currentSlide){ 
    var slickItem = $('.multiple-items .slick-slide:not(".slick-cloned")').length; 

    if (currentSlide == 0) { 
    //do stuff 
    alert('first'); 
    } 
    else if (currentSlide == (slickItem - 1)) { 
    //do stuff 
    alert('last'); 
    } 
}); 

这是fiddle。