2021年8月25日设置固定宽度的Swiper滑块失效问题求助

根因说明 #

你遇到的问题是官方CDN拉取的最新版本Swiper更新了宽度计算逻辑：默认状态下slidesPerView参数优先级高于自定义slide宽度，导致固定宽度配置被覆盖，滑块自动撑满容器全宽。

修复步骤 #

• 首先固定CDN引入的Swiper版本号，替换掉地址中的latest标识，推荐使用经过验证的稳定版本，例如10.3.1、9.4.1，避免官方自动推送更新导致的兼容性问题。
• 初始化Swiper时显式添加slidesPerView: 'auto'配置，该参数会通知Swiper优先读取你为slide设置的自定义宽度，而非自动计算均分宽度：

const mySwiper = new Swiper('.swiper-container', {
  // 你的原有配置项
  slidesPerView: 'auto',
  // 11.x及以上版本需额外添加以下配置
  setWrapperSize: true
})

• 为slide元素添加高优先级的固定宽度样式，避免被默认样式覆盖：

/* 给你的swiper容器加自定义类名，避免全局污染 */
.my-custom-swiper .swiper-slide {
  width: 320px !important; /* 替换为你的实际固定宽度 */
}

• 如果你的Swiper默认处于隐藏状态（如Tab内容、弹窗内部），在容器切换为显示状态时需手动调用更新方法重新计算尺寸：

mySwiper.update()

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