How to stop Slick Slider autoplay on click and drag
14,339
Updated
You need to using slickSetOption
like below:
HTML
<div class="my-slick">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</div>
JS
var slickOptions = {
autoplay: true,
// rest of options
},
$slick = $('.my-slick');
$slick.slick(slickOptions);
// built-in feature, for more info check the [doc](http://kenwheeler.github.io/slick/)
$slick.on('swipe', function(event, slick, direction) {
reinitSlick();
});
$('.slick-prev, .slick-next').on('click', function(){
reinitSlick();
});
var reinitSlick = function() {
$slick.slick('slickSetOption', {
'autoplay': false
}, false);
}
Comments
-
Bart about 2 years
I'm using Ken Wheeler's Slick and want to set autoplay on false when the user either clicks on slick-prev or slick-next or drags the carousel left or right.
slick = $('.slick').slick({ slidesToShow: 3, slidesToScroll: 2, autoplay: true, autoplaySpeed: 2500, dots: false, });
I tried the following
$('.slick-prev, .slick-next').on('click', function(){ slick.slickSetOption('autoplay', false, false); });
And
$('.slick-prev, .slick-next').on('click', function(){ $(slider).slick('slickSetOption', 'autoplay', false, false); });
Both did not work, and I'm not sure how to look for a draggable event.