swiper怎么添加鼠标滑动图片播放下一张

要让Swiper在鼠标滑动时播放下一张图片，你可以利用Swiper的`mousewheel`事件。以下是添加这个功能的基本步骤：

1. 确保已经包含了Swiper的CSS和JS库，如之前所述。

2. 初始化Swiper实例时，增加`mousewheel`事件监听器，当用户滚动鼠标滚轮时，触发滑动到下一张图片的功能：

var swiper = new Swiper('#swiper-container', {
  ... // 其他配置项
  mousewheel: {
    releaseOnEdges: false, // 如果开启，鼠标离开边缘停止滚动
    preventDefault: true, // 阻止默认的滚轮滚动行为
  },
  on: {
    'touchstart': function() {
      // 阻止滚轮滚动在触摸开始时触发
      document.addEventListener('mousewheel', function(e) { e.preventDefault(); });
    },
    'touchend': function() {
      // 当触摸结束，恢复正常的滚轮滚动
      document.removeEventListener('mousewheel', function(e) { e.preventDefault(); });
    }
  },
  scrollbar: {
    el: '.swiper-scrollbar-drag', // 如果需要鼠标滚动条
  },
});

// 鼠标滚轮事件处理
swiper.on('scrollEnd', function() {
  if (swiper.isEnd()) {
    swiper.slideTo(swiper.slides.length - 1, 0, false); // 到最后一张
  } else if (swiper.isBeginning()) {
    swiper.slideTo(0, 0, false); // 到第一张
  } else {
    swiper.slideNext(); // 普通的向上滚动滑动到下一张
  }
});

在这个例子中，我们监听了`scrollEnd`事件，当用户滚动到底部或顶部时，会判断是否是最后一页或第一页，然后相应地切换到下一张或上一张图片。