Swiper.js滑动块撑满父容器 如何设置宽度自适应内部内容？

解决方案 #

你遇到的是Grid布局对Swiper默认宽度计算的干扰问题，按以下步骤调整即可恢复slide宽度自适应内容：

1. 调整Swiper初始化配置，开启宽度自适应模式

const swiper = new Swiper('.swiper', {
  // 核心配置：让slide宽度自动匹配内容
  slidesPerView: 'auto',
  // 其他原有配置保留即可，可自行调整slide间距参数
  spaceBetween: 10,
})

2. 补充CSS样式解决Grid布局冲突

/* 给处于Grid容器内的Swiper根节点添加该样式，避免被Grid拉伸 */
.swiper {
  width: fit-content;
  /* 如果需要swiper占满grid单元格的宽度但slide仍自适应内容，就换成width: 100% */
}

/* 重置swiper-slide的宽度，取消默认的100%宽度设定 */
.swiper-slide {
  width: auto !important;
}

3. 注意事项

• 不要给.swiper-slide手动设置固定宽度，内部内容的宽高会自动撑开slide
• 不要修改.swiper-wrapper的默认flex布局属性，避免破坏Swiper原生的宽度计算逻辑

问题截图：

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