javascript - Swiper.js Carousel 如何用鼠标中键同时控制多个轮播

Question

我的屏幕上有 5 个轮播，它们都由相同的导航按钮控制。我还需要用鼠标中键滚动来控制它们。当我激活鼠标滚轮控制时，只有鼠标在顶部的轮播在滚动时才会移动。我需要把它们全部搬走。

标签： javascriptcsscarouselswiperswiper.js

Answer 1

我不知道是否有更好的解决方案，但我是这样做的。

// Wheel Control on Carousels

$( '#body' ).on( 'mousewheel', function ( event ) {
  if ( typeof event.originalEvent.wheelDeltaY === 'undefined' ) {
  console.log( "could not find mouse deltas" )
}
var deltaY = event.originalEvent.wheelDeltaY;
var scrolledUp = deltaY < 0;
var scrolledDown = deltaY > 0;
if ( scrolledUp ) {
  if (swiper_color.activeIndex > 2) {
goTop();
  }else{
  swiper_color.slidePrev();
  swiper_image.slidePrev();
  swiper_desc.slidePrev();
  swiper_title.slidePrev();
  swiper_jar.slidePrev();
  }
  }
  if ( scrolledDown ) {
if (swiper_color.activeIndex < 2) {
  swiper_color.slideNext();
  swiper_image.slideNext();
  swiper_desc.slideNext();
  swiper_title.slideNext();
  swiper_jar.slideNext();
}else{
  checkscroll();
}
   }
});