Swiper为何自动设置swiper-slide宽度？如何实现内容自适应宽度？

为什么Swiper会自动设置slide宽度？ #

Swiper默认的布局逻辑是让slide填充容器宽度，或者根据slidesPerView的默认值（通常为1）强制slide宽度等于容器宽度，这是它实现基础轮播功能的默认行为。

实现slide宽度自适应内容的配置方法 #

只需修改Swiper初始化配置，配合少量CSS调整即可实现：

1. 修改JS初始化配置
   在Swiper实例中添加slidesPerView: 'auto'，这个参数会让Swiper放弃强制设置slide宽度，转而让slide根据自身内容自动调整：

   import Swiper, { Navigation, Pagination } from 'swiper';
   import 'swiper/css';
   import 'swiper/css/navigation';
   import 'swiper/css/pagination';
   
   const swiper = new Swiper('.swiper', {
     modules: [Navigation, Pagination],
     slidesPerView: 'auto', // 关键配置
     spaceBetween: 10, // 可选：设置slide之间的间距，避免内容挤在一起
   });
   

2. 补充CSS样式
   部分场景下Swiper的默认样式会限制slide宽度，添加以下CSS确保slide能被内部内容撑开：

   .swiper-slide {
     width: auto !important;
     flex-shrink: 0; /* 防止slide被容器压缩 */
   }
   

完成上述配置后，.swiper-slide就会根据内部内容的宽度自动适配，不再被强制设置为容器宽度。

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