如何用Swiper.js实现自适应宽度的文本轮播？

想要用Swiper.js实现类似App Store和Play Store的文本轮播UI，要求轮播项宽度根据文本内容自动适配（短文本对应窄宽度、长文本对应宽宽度）。目前设置了slidesPerView: 'auto'和CSS.text-carousel-A{ width:auto; }但没有效果，且页面存在多个不同宽度设置的轮播，需要调整哪些参数？

附相关代码：

HTML代码 #

<!-- Text Carousel -->
<div class="swiper-container text-carousel">
    <div class="swiper-wrapper" >
        <div class="text-carousel-A swiper-slide">ABC</div>
        <div class="text-carousel-A swiper-slide">Short Text</div>
        <div class="text-carousel-A swiper-slide">Longer Text Example</div>
        <div class="text-carousel-A swiper-slide">ABC2</div>
        <div class="text-carousel-A swiper-slide">D</div>
        <div class="text-carousel-A swiper-slide">Haluk</div>
        <div class="text-carousel-A swiper-slide">A KaramrteC</div>
        <div class="text-carousel-A swiper-slide">Fussilet</div>
        <div class="text-carousel-A swiper-slide">gemini</div>
        <!-- Add more slides as needed -->
    </div>
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
    <!-- No navigation buttons needed -->
</div>

CSS代码 #

.text-carousel-A{ width:auto; }

JS代码 #

const textCarousel = new Swiper('.text-carousel', { 
    slidesPerView: 'auto', 
    spaceBetween: 1, 
    loop: false, 
    centeredSlides: false 
});

需要从Swiper参数和CSS样式两方面调整，同时处理多轮播共存的问题：

1. 调整Swiper初始化参数 #

添加freeMode: true，这是实现slide宽度自适应的核心——默认Swiper会强制slide填充容器宽度，开启freeMode后slide会根据自身内容宽度排列，配合slidesPerView: 'auto'才能生效。另外建议加上watchOverflow: true，当轮播内容不足一屏时自动禁用滑动，提升体验。

修改后的JS代码：

const textCarousel = new Swiper('.text-carousel', { 
    slidesPerView: 'auto', 
    spaceBetween: 10, // 建议调大间距，避免文本拥挤
    loop: false, 
    centeredSlides: false,
    freeMode: true,
    watchOverflow: true
});

2. 修正CSS样式 #

默认.swiper-slide是块级元素，即使设置width: auto也会占满父容器宽度。需要修改为行内块级元素，让宽度由文本内容决定，同时禁止文本换行：

修改后的CSS代码：

.text-carousel-A {
    width: auto !important; /* 强制覆盖Swiper自动生成的宽度 */
    display: inline-block;
    white-space: nowrap;
    padding: 4px 12px; /* 可选：添加内边距，让文本更美观 */
    line-height: 1.5; /* 可选：调整行高，优化垂直居中 */
}

3. 多轮播共存的处理 #

如果页面有多个不同配置的轮播，需要给每个轮播设置独立的类名（不要共用.text-carousel），初始化时分别选择对应的容器，避免参数冲突。例如：

<!-- 第一个轮播 -->
<div class="swiper-container text-carousel-1">...</div>
<!-- 第二个轮播 -->
<div class="swiper-container text-carousel-2">...</div>

// 第一个轮播初始化
const carousel1 = new Swiper('.text-carousel-1', {
    slidesPerView: 'auto',
    freeMode: true,
    // 其他专属参数
});

// 第二个轮播初始化
const carousel2 = new Swiper('.text-carousel-2', {
    slidesPerView: 3,
    // 其他专属参数
});

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