Swiper循环滑块出现图片重复、末张幻灯片无法显示问题求助

我用SwiperJS开发了一个可同时显示3张图片的无限循环滑块，添加图片后出现异常——最后一张幻灯片后会出现空白区域（截图如下）：

我的HTML代码 #

<div>
 <div class="swiper mySwiper w-11/12 h-full">
     <div class="swiper-wrapper flex justify-center items-center ease-linear">
       <!-- Swiper Slides embedded using DOM -->
     </div>
 </div>
 <button class="swiper-button-next"></button>
 <button class="swiper-button-prev"></button>
 <div class="swiper-pagination"></div>
</div>

我的JavaScript代码 #

1. 动态嵌入图片到滑块容器 #

let images = ['img1.webp', 'img2.webp', 'img3.webp', 'img4.webp', 'img5.webp'];

document.querySelector('.mySwiper > .swiper-wrapper').innerHTML = images.map((img,index) => {
  return `
  <div key="${index}" class="swiper-slide">
    <img
      class="block object-cover object-center w-full h-full rounded-xl"
      src="./images/${img}"
      alt="gallery"
    />
  </div>`
}).join('')

2. 初始化滑块 #

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    centeredSlides: true,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      // 当窗口宽度 >= 1023px 时
      1023: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
    },
});

swiper.loopDestroy();

问题原因与修复方案 #

1. 移除swiper.loopDestroy()调用 #

你在初始化后手动关闭了循环功能，这是末尾出现空白的核心原因。删掉这行代码，保留loop: true配置，才能实现无限循环效果。

2. 清理swiper-wrapper的自定义flex样式 #

你给.swiper-wrapper添加的flex justify-center items-center会和Swiper自身的布局逻辑冲突，导致滑块排列异常。保留Swiper默认的wrapper样式即可：

<div class="swiper-wrapper">
  <!-- 幻灯片内容 -->
</div>

3. 动态插入幻灯片后更新Swiper布局 #

动态修改DOM后，需要调用swiper.update()让Swiper重新计算滑块尺寸和位置，避免布局偏移。调整后的完整JS代码如下：

let images = ['img1.webp', 'img2.webp', 'img3.webp', 'img4.webp', 'img5.webp'];

// 先插入幻灯片DOM
document.querySelector('.mySwiper > .swiper-wrapper').innerHTML = images.map((img, index) => {
  return `
  <div class="swiper-slide">
    <img
      class="block object-cover object-center w-full h-full rounded-xl"
      src="./images/${img}"
      alt="gallery"
    />
  </div>`
}).join('')

// 初始化Swiper
var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    centeredSlides: true,
    spaceBetween: 30,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      1023: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
    },
});

// 通知Swiper更新布局
swiper.update();

额外注意点 #

• Swiper的loop模式要求幻灯片数量至少大于等于slidesPerView的值，你当前有5张幻灯片，满足slidesPerView:3的循环要求；
• 若图片尺寸不确定，可监听图片load事件后再调用swiper.update()，避免布局抖动。

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