I have a slick slider on my website, and i'm using also jquery-mousewheel to switch slides. The issue is that i want to disable the mousewheel while it's sliding.
Do you know how i can do this ?
function detectScroll() {
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
detectScroll()I found a solution!
The thing is that I had to declare a boolean that i called animating. Then I used the on('beforeChange') and on('afterChange') of slick to detect rather the animation is finished or not. And I just had to check if the the animating is true or false in the beginning of the mousewheel function and return false if it's true.
I hope it would help a lot of people!
var animating = false;
function detectScroll() {
$('body').bind('mousewheel', function(e){
//If animated than we wait the animation to be over
if (animating) {
return false;
}
if(e.originalEvent.wheelDelta /120 > 0) {
$('.slickSlider').slick('slickPrev');
}
else{
$('.slickSlider').slick('slickNext');
}
});
}
$('.slickSlider').slick({
vertical: true,
verticalSwiping: true,
autoplay: false,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false
})
$('.slick').on('beforeChange', function(event, slick, currentSlide, nextSlide){
animating = true;
}).on('afterChange', function(event, slick, currentSlide, nextSlide){
animating = false
});
detectScroll()Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments