How to disable animation while animating using mousewheel and slick slider?

Question

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()

Answer 1

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()