Swiper滑块循环异常：幻灯片数量不足时无法正常循环

问题描述 #

当设置6张幻灯片且slidesPerView: 3时，Swiper滑块可正常循环；但当幻灯片数量为5张且slidesPerView: 3时，滑块播放完最后一张后停止，无法实现循环效果。

问题原因 #

Swiper的loop模式依赖克隆幻灯片实现无缝滚动衔接。当实际幻灯片数量与slidesPerView的组合导致末尾剩余幻灯片数量不足时，默认克隆逻辑无法生成足够的衔接幻灯片，进而中断循环。

解决方案 #

在Swiper配置中添加loopAdditionalSlides参数，指定额外克隆的幻灯片数量，确保循环时有足够内容完成衔接。修改后的JS配置如下：

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 3,
    spaceBetween: 30,
    mousewheel: true,
    grabCursor: true,
    loop: true,
    // 额外克隆与slidesPerView数量一致的幻灯片，保证循环连贯性
    loopAdditionalSlides: 3,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    }
});

原理说明 #

loopAdditionalSlides会强制Swiper额外克隆指定数量的幻灯片，不受默认克隆逻辑限制。即使实际幻灯片数量不足，也能生成足够的克隆内容维持循环的无缝衔接。相比强制增加实际幻灯片数量的方式，该参数适配性更强。

完整代码示例 #

HTML #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <title></title>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
        </div>
    </div>
</body>
</html>

CSS #

html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

JavaScript #

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 3,
    spaceBetween: 30,
    mousewheel: true,
    grabCursor: true,
    loop: true,
    loopAdditionalSlides: 3,
    autoplay: {
      delay: 500,
      disableOnInteraction: false,
    }
});

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