Swiper.js v9+幻灯片数量不足slidesPerView两倍时无法循环的解决办法

Swiper从v9版本开始，当可用幻灯片数量不超过slidesPerView的两倍时，默认无法启用loop循环功能——比如设置slidesPerView: 5但只有7张幻灯片时循环失效，而slidesPerView设为1或2时能正常运行，这是新版循环逻辑的限制。你的配置没有遗漏关键选项，以下是可行解决方案：

• 手动填充幻灯片数量
  Swiper的loop机制依赖足够的克隆幻灯片实现无缝滚动，可在初始化前复制现有幻灯片，让总数量超过slidesPerView * 2。以slidesPerView=5为例，需让总幻灯片数≥11，示例代码：

  // 假设幻灯片容器类名为.slides-container
  const slideContainer = document.querySelector('.slides-container');
  const slides = slideContainer.children;
  // 针对最大slidesPerView=5的情况，判断是否需要填充
  if (slides.length <= 10) {
    // 复制现有幻灯片追加到容器
    Array.from(slides).forEach(slide => {
      slideContainer.appendChild(slide.cloneNode(true));
    });
  }
  // 再初始化Swiper
  

• 配置loopAdditionalSlides强制生成克隆项
  通过指定loopAdditionalSlides参数，强制Swiper生成足够的克隆幻灯片来支撑循环，根据你的slidesPerView最大值调整数值：

  const params = {
    modules: [Autoplay, Pagination, Navigation],
    autoplay: {
        enabled: false,
        speed: 3000,
    },
    speed: 400,
    navigation: true,
    pagination:{
        enabled: true,
        dynamicBullets: true,
        dynamicMainBullets: 4
    },
    loop: true,
    loopAdditionalSlides: 5, // 添加该配置，确保克隆数量足够
    spaceBetween: 30,
    centeredSlides: false,
    breakpoints: {
        0: {
            slidesPerView: 1,
        },
        [BREAKPOINT_WIDTH.extraSmall*16]: {
            slidesPerView: 3
        },
        [BREAKPOINT_WIDTH.medium*16]: {
            slidesPerView: 3
        },
        [BREAKPOINT_WIDTH.large*16]: {
            slidesPerView: 5
        }
    },
  };
  

• 升级到Swiper v11+
  官方已在Swiper v11版本修复了这个逻辑限制，升级后无需额外配置，即可在幻灯片数量不足slidesPerView*2时正常启用loop功能。

内容的提问来源于stack exchange，提问作者Danny.404