SwiperJS循环功能异常：slidesPerView=2时仅左滑可循环

问题原因 #

当开启loop: true且设置slidesPerView > 1时，Swiper依赖复制前后幻灯片来模拟循环效果。若幻灯片数量不足或未配置额外复制参数，会导致向右滑动无法触发循环跳转。

解决方案 #

1. 保证幻灯片数量达标 #

确保Data数组中的幻灯片数量大于slidesPerView的值（此处为2），至少需要3张及以上幻灯片。如果数量过少，Swiper无法生成足够的复制幻灯片支撑双向循环。

2. 添加loopAdditionalSlides参数 #

在Swiper配置中加入loopAdditionalSlides，值与当前slidesPerView一致，强制Swiper多复制对应数量的幻灯片，修复双向循环逻辑：

<Swiper className="testimonial__container"
  loop={true}
  grabCursor={true}
  spaceBetween={24}
  loopAdditionalSlides={2} // 新增配置，与slidesPerView值匹配
  pagination={{
    clickable: true,
  }}
  breakpoints={{
    576: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 48,
    }
  }}
  modules={[Pagination]}
>
  {/* 幻灯片渲染内容 */}
</Swiper>

3. 检查全局配置一致性 #

确认loop参数为全局设置，未在breakpoints中被覆盖；同时保证各断点下的slidesPerView设置符合需求，若调整该值，需同步修改loopAdditionalSlides的数值。

验证 #

修改后测试双向滑动：向右滑动最后一组幻灯片，应无缝跳转至开头的幻灯片组；向左滑动开头组，循环逻辑保持正常。

内容的提问来源于stack exchange，提问作者ubi sage