Stop autoplay after clicking on dots in slick.js

五迷三道 提交于 2020-01-24 07:54:05

问题


So, this is code I use for slider:

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

And I want that after user clicks on any dot, it will disable autoplay. Then I tried this:

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

But no help. Here is DEMO from jsFiddle. Is this possible with slick.js?


回答1:


Try this

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

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



回答2:


From one of the issues in the github-forum, I saw that you have to attach init event before initializing with slick.

$('.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



来源:https://stackoverflow.com/questions/37675461/stop-autoplay-after-clicking-on-dots-in-slick-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!