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

我使用slick.js在我的网站上创建了一个轮播。它必须包含在一个“无无限”滚动4元，我用的是JS是：Slick.js错误的箭头行为，如何解决？

$(document).ready(function(){ 

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

});

THRE旋转木马的工作原理，直到最后一个元素，这里的光滑转盘箭头变成灰色，表示我不能滚动了。无论如何，如果我点击灰色箭头，例如3倍的数字由插件以某种方式注册...所以，如果我想滚动回来的对面的箭头，我必须点击3次之前的滚动开始...如何我可以做到阻止这种行为？

来源

2016-05-10 user31929

你会显示所有你有转盘的选项？这里正在处理您的选项http://jsfiddle.net/q1qznouw/417/ –

我的所有选项都有问题，其他任何我的代码 – user31929

@ user31929我已经为您的问题添加了解决方案。如果您有任何问题，请告诉我。 – Yass

看起来，尽管表面上处于禁用状态，浮油事件仍在发射。您可以查询此使用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

来源

2016-05-13 21:54:48 Yass

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

回答

相关问题