Swiper Slider 鼠标滚动和循环内容

Question

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

我的 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