Swiper虚拟滑动（virtual）与循环（loop）功能兼容异常求助

安全阿岳

2026-8-8

解决Swiper Virtual与Loop同时工作的问题

当同时启用Swiper的virtual（虚拟滑块）和loop（循环滑动）功能时，出现滑动到末尾停止的问题，核心原因是freeMode系列配置与loop模式逻辑冲突，同时虚拟滑块的配置未适配循环机制。以下是具体修复方案：

关键调整点

移除freeMode及freeModeSticky：这两个属性会让滑块保持自由滑动状态，直接破坏loop的循环跳转逻辑，导致无法首尾衔接。
开启centeredSlides（可选）：让当前滑块居中显示，优化循环滑动的视觉连贯性。
确保虚拟滑块生成逻辑正常：Loop模式会自动复制前后滑块，无需额外修改虚拟滑块的生成代码，保持原有逻辑即可。

修复后的完整代码

var swiper = new Swiper(".swiper-container", {
  height: 400,
  width: 240,
  loop: true,
  autoplay:{
    delay: 2000
  },
  direction: 'vertical',
  slidesPerView: 1,
  centeredSlides: true,
  spaceBetween: 30,
  mousewheel: true,
  slideToClickedSlide: true,
  pagination: {
    el: ".swiper-pagination",
    type: "fraction"
  },
  scrollbar: {
    el: ".swiper-scrollbar",
    draggable: true,
    dragSize: 40,
  },
  virtual: {
    slides: (function() {
      var slides = [];
      for (var i = 0; i < 4; i += 1) {
        slides.push(
          '<img src="https://picsum.photos/600/600/?image=' +
            (i + 1) +
            '"/><p>' +
            (i + 1) +
            "</p>"
        );
      }
      return slides;
    })()
  }
});