如何让配置centeredSlides与slidesPerView:auto的Swiper实现连续无限循环

centeredSlides: true与slidesPerView: "auto"组合配置下，完全可以实现平滑的连续无限循环效果，你遇到的末尾跳回开头的问题，是缺少必要的循环相关配置导致的。

• 必须显式开启loop: true
• 必须配置loopAdditionalSlides参数，值建议设置为当前slide总数的1/2及以上，该参数会控制Swiper在边缘预生成的复制slide数量，宽度不固定的场景下如果该值太小，就会出现滚动到最后没有可用衔接节点，直接跳回开头的问题
• 所有slide需要单独设置宽度，不能统一强制指定宽度，保证Swiper可以正确识别每个slide的实际尺寸

const mySwiper = new Swiper('.swiper-container', {
  // 基础功能配置
  centeredSlides: true,
  slidesPerView: "auto",
  // 循环相关核心配置
  loop: true,
  loopAdditionalSlides: 6, // 根据你的实际slide数量调整，数值足够即可
  // 自动播放相关配置（如有需要）
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  // 其他功能配置如分页器、导航按钮等可正常保留
})

如果完成配置后仍存在跳变问题，可优先排查两个场景：

• 你是否给slide或swiper容器添加了额外的margin、padding等影响宽度计算的样式，导致Swiper内部偏移量计算出错
• 若slide是动态渲染/包含图片等异步加载资源，需要等待所有资源加载完成后再初始化Swiper，或在资源加载完成后调用mySwiper.update()更新内部尺寸计算结果

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