单击 slick.js 中的点后停止自动播放

Posted

技术标签:

【中文标题】单击 slick.js 中的点后停止自动播放【英文标题】:Stop autoplay after clicking on dots in slick.js 【发布时间】:2016-10-07 03:00:59 【问题描述】:

所以,这是我用于滑块的代码:

$('.autoplay').slick(
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    dots: true
);

我希望在用户点击任何点后,它会禁用自动播放。然后我尝试了这个:

$('.autoplay').on('init', function() 
    $('.slick-dots').click(function() 
        $('.autoplay').slick('autoplay', false);
    );
);

但没有帮助。这是来自 jsFiddle 的DEMO。 slick.js 可以做到这一点吗?

【问题讨论】:

【参考方案1】:

试试这个

$('.autoplay').slick(
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    dots: true
);

$('.slick-dots').on('click', function() 
    $('.autoplay').slick('slickPause');
);

【讨论】:

见鬼 :) 谢谢,就是这样。【参考方案2】:

github-forum 中的一个问题中,我看到您必须在使用 slick 初始化之前附加 init 事件。

$('.autoplay').on('init', function(slick) 
    $('.slick-dots').on('click',function() 
        $('.autoplay').slick('slickPause');
    );
).slick(
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,
)

DEMO HERE

【讨论】:

【参考方案3】:

你可以使用

$('.slick').slick('slickPause');

暂停。你可以再玩一遍

$('.slick').slick('slickPlay');

【讨论】:

以上是关于单击 slick.js 中的点后停止自动播放的主要内容,如果未能解决你的问题,请参考以下文章

Slick.js使用方法(响应式轮播插件)

HTML5 视频自动播放不适用于 slick.js

有啥方法可以停止引导轮播幻灯片的自动播放?

youtube 视频在按钮单击时自动播放

防止 twitter 引导轮播在页面加载时自动滑动

单击链接后 jQuery 音频停止