Swiper Slider 鼠标滚动和循环内容

Question

我正在使用 swiper 滑块水平滚动我的幻灯片。我希望我的内容循环播放，但由于任何原因，它只重复一次，然后停止。

我的 swiper 滑块设置如下所示：

var swiper = new Swiper(".swiper-container", {
  direction: "horizontal",
  mousewheelControl: true,
  slidesPerView: "auto",
  freeMode: true,
  followFinger: true,
  loop: true
});

代码笔：https ://codepen.io/Dennisade/pen/ZPygbr

我感谢任何帮助

Answer 1

从 Swiper 版本 4.5.0 开始，有三件事会导致您的代码出错：

• 首先，您swiper-wrapper在每张幻灯片周围添加了一个div。您只需要一个swiper-wrapper包含所有幻灯片的 div。

• 第二件事，当你slidesPerView: 'auto'与 一起设置时loop: true，你需要提供循环幻灯片的总数并将其添加到loopedSlides参数中。在 Parameters > slidesPerView 中查看文档：https ://swiperjs.com/swiper-api#parameters 。

• 最后一件事，mousewheelControl不再使用参数，您需要像这样的mousewheel参数（https://swiperjs.com/swiper-api#mousewheel-control）：

mousewheel: {
  releaseOnEdges: true,
},

在这种情况下，您也可以删除direction: "horizontal"和followFinger: true。

所以解决方案是：

var swiper = new Swiper(".swiper-container", {
  slidesPerView: "auto",
  freeMode: true,
  loop: true,
  loopedSlides: 8 // according to the codepen
  mousewheel: {
    releaseOnEdges: true,
  },
});

检查你的代码笔我分叉的工作：https ://codepen.io/olig/pen/rgmPyb