Swiper.js动态宽度滑动项 如何让轮播标题宽度匹配封面图片宽度

实现方案 #

1. 调整DOM结构 #

保证每个滑动项内部仅包含封面图和标题元素：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="你的封面地址" class="book-cover" alt="书籍封面">
      <p class="book-title">此处为书籍标题内容</p>
    </div>
    <!-- 其余滑动项结构一致 -->
  </div>
</div>

2. 核心CSS样式配置 #

/* 保持原有Swiper基础样式不变，新增以下配置 */
.swiper-slide {
  /* 让滑动项宽度由内部内容（封面图）自动决定 */
  width: fit-content;
  /* 避免Swiper的flex布局自动压缩滑动项宽度 */
  flex-shrink: 0;
}
.book-cover {
  /* 可根据需求统一设置封面最大高度，宽度自适应，保证封面比例不变 */
  max-height: 240px;
  width: auto;
  display: block;
}
.book-title {
  /* 标题宽度和上方封面宽度强制对齐 */
  width: 100%;
  /* 长文本自动换行 */
  word-wrap: break-word;
  /* 可选配置：最多显示2行，超出省略，不需要可删除 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

如果需要兼容低版本浏览器不支持fit-content属性，可以把.swiper-slide的样式替换为：

.swiper-slide {
  display: table;
  flex-shrink: 0;
}

效果完全一致，同样可以实现滑动项宽度由封面图决定，标题跟随封面宽度自动换行。

3. Swiper配置说明 #

保持你原有slidesPerView: 'auto'的配置即可，不需要额外修改其他宽度相关参数。

效果参考 #

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