油滑滑塊 - 有條件的滑動導航

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。