Swiper.js Carousel如何实现鼠标中键同时控制多个轮播组件

核心思路 #

默认Swiper的mousewheel配置是每个实例独立监听自身容器的滚轮事件，所以只有鼠标悬停的实例会响应。我们需要关闭默认的独立监听，改为全局统一监听滚轮事件，同时控制所有实例滑动。

实现步骤 #

• 初始化所有Swiper实例时关闭自带的mousewheel配置，避免独立响应
• 将所有Swiper实例存入数组，方便批量控制
• 给轮播公共父容器绑定滚轮事件，添加节流逻辑避免频繁触发，根据滚轮方向统一调用所有实例的滑动方法

代码示例 #

1. 初始化Swiper实例 #

// 存储所有swiper实例的公共数组
const allSwipers = []

// 初始化5个Swiper组件
for (let i = 0; i < 5; i++) {
  const swiper = new Swiper(`.swiper-${i}`, {
    // 保留你原有的配置，比如共用导航配置
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 关键：关闭默认的滚轮控制
    mousewheel: false,
    // 其他原有配置：比如loop、speed等
  })
  allSwipers.push(swiper)
}

2. 绑定统一滚轮事件 #

// 节流控制，避免一次滚动触发多次切换
let scrollLock = false
const scrollDelay = 800 // 单位ms，可根据滑动动画时长调整，建议略大于swiper的speed配置

// 监听所有轮播公共父容器的滚轮事件，示例父容器类名为swiper-group-wrap
document.querySelector('.swiper-group-wrap').addEventListener('wheel', (e) => {
  if (scrollLock) return
  scrollLock = true

  // deltaY>0为向下滚动，切换下一张；deltaY<0为向上滚动，切换上一张
  if (e.deltaY > 0) {
    allSwipers.forEach(swiper => swiper.slideNext())
  } else {
    allSwipers.forEach(swiper => swiper.slidePrev())
  }

  setTimeout(() => {
    scrollLock = false
  }, scrollDelay)

  // 不需要阻止页面默认滚动可删除下行和下方passive配置
  e.preventDefault()
}, { passive: false })

注意事项 #

• 如果你的轮播放在可滚动的页面区域，不需要阻止默认滚动时，删除e.preventDefault()和passive: false配置即可
• 原有共用导航按钮的逻辑不受影响，可正常保留使用
• 循环模式、自动播放等Swiper原有功能适配该方案，无需额外修改

内容的提问来源于stack exchange，提问作者SorryBaby