Slick 滑块 - 有条件的幻灯片导航

Question

我设法使用以下方法设置/显示我的滑块导航：

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

这个想法是使用 Font Awesome 图标自定义导航，但是如果滑块中没有下一张或上一张幻灯片，我是否可以禁用/更改导航箭头的样式？

谢谢你帮助我

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。