如何在使用鼠标滚轮和光滑滑块制作动画时禁用动画？

Question

我的网站上有一个灵活的滑块，我还使用 jquery-鼠标滚轮来切换幻灯片。问题是我想在滑动时禁用鼠标滚轮。

你知道我该怎么做吗？

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

我找到了解决办法！
问题是我必须声明一个我称之为动画的布尔值。然后我使用 slick 的 on('beforeChange') 和 on('afterChange') 来检测动画是否完成。我只需要检查鼠标滚轮函数开头的动画是真还是假，如果是真，则 return false。

希望能帮到很多人！

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

如何在使用鼠标滚轮和光滑滑块制作动画时禁用动画？

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

javascript

jquery

slick.js

mousewheel