Slick.js错箭行为，如何解决？
Slick.js错箭行为，如何解决？
提问于 2016-05-10 15:09:35
我正在使用slick.js在我的站点上创建一个旋转木马。它必须在“非无限”滚动中包含4个元素，我使用的js是：
$(document).ready(function(){
$('.caroselloslick').slick({
lazyLoad: 'ondemand',
infinite: false,
slidesToShow: 4,
slidesToScroll: 1
});
});这个旋转木马可以工作到最后一个元素，这里光滑的旋转木马箭头变成灰色，表明我不能再滚动了。无论如何，如果我点击灰色箭头，例如3倍的数字是由插件以某种方式注册.所以如果我想用相反的箭头向后滚动，我必须在滚动开始前点击3次.我怎样才能阻止这种行为？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-13 21:54:48
表面上看来，这些浮夸的事件虽然似乎是残疾人的状态，但仍在继续前进。您可以使用console.log在afterChange事件中打印诊断消息来查询这个问题：
$('.caroselloslick').on('afterChange', function(event, slick, currentSlide, nextSlide) {
console.log('fired');
});如果在箭头按钮上显式设置disabled属性，则此事件不会在单击时触发，从而确保slick计数器不会被更新，这与slick内容的实际状态相反。
使用上面的信息，您可以引入一个帮助方法来设置箭头按钮的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
});通过检查哪个箭头按钮启动了更改，可以进一步改进上面的内容，我将留给您。
有关示例，请参见下面的演示：
小提琴演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37142437
复制相关文章
相似问题
腾讯云开发者
