Swiper 滑块鼠标滚动和循环内容

Question

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

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

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,
  },
});

检查我 fork 的你的 codepen 是否有效：https://codepen.io/olig/pen/rgmPyb

Swiper 滑块鼠标滚动和循环内容

Swiper Slider Mouse Scroll And Looping Content

javascript

css

jquery

slideshow

swiper