Question

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

我的滑动滑块设置如下：

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

Codepen： https://codepen.io/Dennisade/pen/ZPygbr

感谢您的帮助

Answer 1

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

首先，您在每张幻灯片周围添加了一个activate(){ this._super(...arguments); document.body.classList.add('bg-gradient-primary'); } div。您只需要一个swiper-wrapper div即可包装所有幻灯片。
第二件事，当您同时设置swiper-wrapper和slidesPerView: 'auto'时，需要提供循环幻灯片的总数并将其添加到loop: true参数中。在“参数”> slidesPerView：https://idangero.us/swiper/api/#parameters中签出文档。
最后，loopedSlides参数不再使用，您需要像这样的mousewheelControl参数（https://idangero.us/swiper/api/#mousewheel）：

mousewheel

在这种情况下，您还可以放下mousewheel: { releaseOnEdges: true, },和direction: "horizontal"。

所以解决方法是：

followFinger: true

检出我分叉的代码笔，它有效：https://codepen.io/olig/pen/rgmPyb

滑动滑块鼠标滚动和循环播放内容

1 个答案: