SwiperJS图片滑块间距异常问题求助

问题核心是.swiper-slide默认宽度被强制拉伸，导致图片外侧出现橙色空白，同时图片未正确保持比例。以下是针对性修复方案：

1. 调整Slide宽度自适应内容 #

修改.swiper-slide的CSS，让它根据图片实际宽度自动调整，避免多余留白：

.swiper-slide {
    background-color: orange;
    /* 取消默认拉伸，让宽度由图片内容决定 */
    width: auto;
    /* 仅保留垂直居中，避免水平居中导致的两侧空白 */
    display: flex;
    align-items: center;
}

2. 优化图片比例显示 #

确保图片高度填满Slide的同时，保持原有宽高比，避免变形或留白：

.swiper-slide img {
    display: block;
    height: 100%;
    /* 自动计算宽度，匹配图片原始比例 */
    width: auto;
}

3. 补全导航按钮（可选） #

你的JS配置中启用了导航功能，但HTML里缺少对应按钮元素，导致导航无法生效，可补充：

<!-- 在swiper容器内添加以下代码 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

完整修复后代码示例 #

HTML #

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>Photographies - Alan Renault</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/swiper@11.0.5/swiper-bundle.min.css" rel="stylesheet">     
</head>
<body>
    <div class="content">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_9386.jpg"/></div>
                <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8940.jpg"/></div>
                <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_8888.jpg"/></div>
                <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7940.jpg"/></div>
                <div class="swiper-slide"><img src="https://alanrenault.com/gallery/photographies/ALR_7317.jpg"/></div>
            </div>
            <div class="swiper-pagination"></div>
            <!-- 新增导航按钮 -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: "auto",
            spaceBetween: 30,
            grabCursor: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>
</html>

CSS #

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.content {
    background-color: blue;
}

.swiper {
    width: 100%;
    height: 94vh;
    max-height: 1400px;
}

.swiper-slide {
    background-color: orange;
    width: auto;
    display: flex;
    align-items: center;
}

.swiper-slide img {
    display: block;
    height: 100%;
    width: auto;
}

修改后，每个Slide宽度会自动匹配图片宽度，仅保留设置的30px间距，不会出现多余橙色空白，同时滑块滑动功能正常。

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