Slick.js 错误的箭头行为，如何解决？

Question

我正在使用 slick.js 在我的网站上创建轮播。它必须在 "no-infinite" 滚动中包含 4 个元素，我使用的 js 是：

$(document).ready(function(){

  $('.caroselloslick').slick({
        lazyLoad: 'ondemand',
        infinite: false,
         slidesToShow: 4,
        slidesToScroll: 1
    });

});

三个旋转木马一直工作到最后一个元素，这里光滑的旋转木马箭头变成灰色，表示我不能再滚动了。无论如何，如果我点击灰色箭头，例如插件以某种方式注册了 3 倍的数字......所以如果我想用相反的箭头向后滚动，我必须在滚动开始前点击 3 次......如何我可以做些什么来阻止这种行为？

Answer 1

尽管看起来处于禁用状态，但似乎 slick 事件仍在触发。您可以使用 console.log 进行查询，以在 afterChange 事件中打印诊断消息：

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  console.log('fired');
});

如果您在箭头按钮上明确设置 disabled 属性，则单击时不会触发此事件，从而确保光滑计数器不会更新，这与光滑内容的实际状态相反。

使用以上信息，您可以引入一个辅助方法来根据 aria-disabled 的值设置箭头按钮的 disabled 属性：

function checkArrowState($arrow) {
  if ($arrow.attr('aria-disabled') == 'true') {
    $arrow.attr('disabled', 'disabled');
  } else {
    $arrow.removeAttr('disabled');
  }
}

在afterChange事件中，可以这样调用上面的方法：

$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  checkArrowState($('.slick-arrow:eq(0)')); //Previous arrow
  checkArrowState($('.slick-arrow:eq(1)')); //Next arrow
});

可以通过检查哪个箭头按钮启动更改来进一步改进上面的内容，我将留给你。

请参阅下面的演示以获取工作示例：

Fiddle Demo

Slick.js 错误的箭头行为，如何解决？

Slick.js wrong arrows behaviour, how to solve?

javascript

jquery

slick.js