Splide轮播组件幻灯片间距问题：如何实现演示版间隙效果？

我复制了Splide官方演示的代码，但幻灯片紧密贴合，而演示版的幻灯片之间存在间距。尝试修改代码添加间隙后，不仅没达到预期效果，还出现了图片堆叠的问题。

我的代码如下：

<body>
        <section id="image-carousel" class="splide"
            aria-label="Beautiful Images">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.fbabf48626f686c234fb11a5a2ea3775?rik=082x0cClFqLbig&riu=http%3a%2f%2fsplidejs.com%2fimages%2fslides%2ffull%2f01.jpg&ehk=%2fWsS6qfQhyxiACXLqZV5NxqLljy18m0qoXlLW3MXNbA%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.be080585c0da64067404b23530a814ce?rik=vjGDbB2xFyn9Sw&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2016%2f03%2f10%2f318375-nature-landscape-lake-mountain-forest-wildflowers-spring-pine_trees-path-Switzerland-HDR.jpg&ehk=W21nAe%2fQYSWkLQF83VxX2RflaJ7eKm%2fm0J4pW85PpjU%3d&risl=&pid=ImgRaw&r=0"
                            alt>
                    </li>
                    <li class="splide__slide">
                        <img
                            src="https://th.bing.com/th/id/R.7554469478facf078b3de643749f06d9?rik=J7govmz%2bm%2fAQYQ&pid=ImgRaw&r=0"
                            alt>
                    </li>
                </ul>
            </div>
        </section>
        <script>

var splide = new Splide( '.splide', {
  type   : 'loop',
  padding: '3rem',
  height: '800px',
  gap    : 20,
  
} ).mount();
</script>

问题原因及修复方案 #

1. 引入Splide核心CSS文件 #

你的代码缺少Splide官方样式文件，这是导致gap配置不生效、图片堆叠的核心原因——Splide的间距布局逻辑依赖官方CSS实现。

在HTML的<head>标签中添加：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

2. 确保引入Splide核心JS文件 #

若未引入Splide的JavaScript核心库，初始化脚本也无法正常工作。在初始化代码前添加：

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

3. 优化图片自适应样式（可选） #

为避免图片拉伸变形，给幻灯片内的图片添加自适应样式：

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

修复后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Splide Carousel</title>
    <!-- 引入Splide CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
    <style>
        /* 图片自适应样式 */
        .splide__slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <section id="image-carousel" class="splide" aria-label="Beautiful Images">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide">
                    <img src="https://th.bing.com/th/id/R.fbabf48626f686c234fb11a5a2ea3775?rik=082x0cClFqLbig&riu=http%3a%2f%2fsplidejs.com%2fimages%2fslides%2ffull%2f01.jpg&ehk=%2fWsS6qfQhyxiACXLqZV5NxqLljy18m0qoXlLW3MXNbA%3d&risl=&pid=ImgRaw&r=0" alt>
                </li>
                <li class="splide__slide">
                    <img src="https://th.bing.com/th/id/R.be080585c0da64067404b23530a814ce?rik=vjGDbB2xFyn9Sw&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2016%2f03%2f10%2f318375-nature-landscape-lake-mountain-forest-wildflowers-spring-pine_trees-path-Switzerland-HDR.jpg&ehk=W21nAe%2fQYSWkLQF83VxX2RflaJ7eKm%2fm0J4pW85PpjU%3d&risl=&pid=ImgRaw&r=0" alt>
                </li>
                <li class="splide__slide">
                    <img src="https://th.bing.com/th/id/R.7554469478facf078b3de643749f06d9?rik=J7govmz%2bm%2fAQYQ&pid=ImgRaw&r=0" alt>
                </li>
            </ul>
        </div>
    </section>

    <!-- 引入Splide JS -->
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
    <script>
        var splide = new Splide( '.splide', {
            type   : 'loop',
            padding: '3rem',
            height: '800px',
            gap    : 20,
        } ).mount();
    </script>
</body>
</html>

关键说明 #

• Splide的gap配置必须配合官方CSS才能生效，没有样式文件时，JS无法正确计算幻灯片的间距和位置，会导致堆叠或无间隙问题。
• object-fit: cover可以让图片保持比例填充幻灯片容器，避免变形。

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