光滑滑块 - 条件滑动导航

Question

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

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

我们的想法是使用Font Awesome图标自定义导航，但是如果滑块中没有Next或Previous幻灯片，我是否有办法禁用/更改导航箭头的样式？

感谢您帮助我

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。