Question

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

$(document).ready(function(){

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

});

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

Answer 1

看起来，即使是看似残疾的状态，光滑的事件仍在发射。您可以使用afterChange进行查询，以在$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) { console.log('fired'); });事件中打印诊断消息：

disabled

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

使用上述信息，您可以引入辅助方法来设置箭头按钮的aria-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 });事件中，您可以像上面这样调用上述方法：

{{1}}

通过检查哪个箭头按钮启动了更改，我可以进一步改进上述内容。

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

<强> Fiddle Demo

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

1 个答案: