Swiper@11.0.5小屏幕slide宽度过大、容器宽度为0问题求助

使用Swiper@11.0.5版本时，屏幕宽度大于575px时滑动组件运行正常，但在更小屏幕下，.swiper-wrapper与.swiper-container宽度变为0，.swiper-slide宽度异常超大（具体为4.48921e6px）。

相关代码 #

JS初始化代码 #

const swiper = new Swiper('.icon-card-swiper', {
    speed: 5000,
    spaceBetween: 20,
    slidesPerView: 3,
    loop: true,
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
    breakpoints: {
        // when window width is >= 0px
        0: {
            slidesPerView: 1,
            spaceBetween: 0
        },
        // when window width is >= 768px
        768: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        // when window width is >= 1024px
        1024: {
            slidesPerView: 3,
            spaceBetween: 20
        }
    }
});

CSS样式 #

.swiper-slide{
    height: auto;
    border-radius: 16px; 
    overflow: hidden;
}

HTML结构 #

<section class="icon-card-slider mb-100">
    <div class="container">
        <div class="row">
            <!-- Slider -->
            <div class="col-12">
                <div class="icon-card-swiper swiper-container">
                    <div class="swiper-wrapper">
                        <?php foreach ($cards as $card) : ?>
                            <div class="swiper-slide">
                                <a href="<?= $card['url'] ?>" class="icon-card" aria-label="<?= $card['title'] ?>">
                                    <div class="icon">
                                        <?= file_get_contents($card['icon']) ?>
                                    </div>
                                    <h3 class="heading-3"><?= $card['title'] ?></h3>
                                    <div class="theme-des"><?= $card['description'] ?></div>
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

1. 补充Swiper容器基础样式 #

小屏幕下容器宽度计算异常通常是因为缺少明确的宽度约束，添加以下CSS：

.icon-card-swiper.swiper-container {
    width: 100%;
    min-width: 0; /* 解决flex布局下子元素无法收缩的问题 */
}
.swiper-wrapper {
    width: 100%;
}

Swiper依赖容器的宽度来计算slide尺寸，当父元素是flex布局时，min-width:0可以避免容器被内部内容撑开或收缩异常。

2. 启用watchOverflow参数并校验断点配置 #

在Swiper初始化时添加watchOverflow: true，当容器无法容纳足够滑动内容时自动禁用滑动逻辑，避免宽度计算错误：

const swiper = new Swiper('.icon-card-swiper', {
    speed: 5000,
    spaceBetween: 20,
    slidesPerView: 3,
    loop: true,
    watchOverflow: true, // 新增参数
    navigation: {
        nextEl: '.swiper-next',
        prevEl: '.swiper-prev',
    },
    breakpoints: {
        0: {
            slidesPerView: 1,
            spaceBetween: 0
        },
        768: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        1024: {
            slidesPerView: 3,
            spaceBetween: 20
        }
    }
});

3. 监听DOM变化确保初始化时机正确 #

如果slide内容是动态渲染的，开启Swiper的DOM观察者，自动监听内容变化并重新计算布局：

const swiper = new Swiper('.icon-card-swiper', {
    // 保留原有参数
    observer: true,
    observeParents: true,
});

4. 约束slide内部元素宽度 #

避免内部元素溢出导致slide宽度异常，给内部卡片添加宽度约束：

.icon-card {
    width: 100%;
    display: block;
}
.icon-card .theme-des {
    word-wrap: break-word; /* 处理长文本换行 */
}

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