如何在 Splide 轮播图中实现滑块间间距与侧边留白-html教程-PHP中文网

如何在 Splide 轮播图中实现滑块间间距与侧边留白

本文详解如何通过 gap 和 padding 配置，结合 CSS 重置图片宽度，在 Splide 中正确实现滑块之间的水平间距（gap）及容器两侧内边距（padding），解决滑块紧贴、无间隔的常见布局问题。

本文详解如何通过 `gap` 和 `padding` 配置，结合 css 重置图片宽度，在 splide 中正确实现滑块之间的水平间距（gap）及容器两侧内边距（padding），解决滑块紧贴、无间隔的常见布局问题。

Splide 默认不会自动为 .splide__slide 元素添加外边距或间隙，因此即使设置了 gap 选项，若子元素（如 <img>）未占满滑块容器宽度，视觉上仍可能看不到预期的间距效果。关键在于：gap 控制的是滑块容器（.splide__slide）之间的 CSS gap（仅对 Flex/Grid 布局生效），而图片自身尺寸必须适配容器，否则会因缩放、溢出或塌陷导致间距失效。

✅ 正确配置步骤

启用 gap 并指定带单位的值
gap 选项需传入带单位的字符串（如 '20px'、'3rem'），而非纯数字。Splide 内部会将其转换为 .splide__list 的 gap CSS 属性（要求其 display 为 flex 或 grid，默认即为 flex）：
```
new Splide('.splide', {
  type: 'loop',
  gap: '2rem',      // ✅ 正确：带单位
  padding: '2rem',  // 左右内边距，使首尾滑块不贴边
  perPage: 3,       // 可选：配合 gap 实现多图并排
}).mount();
```
确保图片 100% 填充滑块容器
默认 <img> 为内联元素，宽度由内容决定，易造成高度塌陷或错位。必须显式设置：
```
.splide__slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* 可选：保持比例裁剪填充 */
}
```
若使用背景图方案，也可改用 background-image + background-size: cover，但语义化和可访问性推荐 <img>。

检查并引入完整资源
确保已正确加载 Splide 官方 CSS 与 JS（CDN 推荐版本）：

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

? 完整可运行示例



  <meta charset="UTF-8"><title>Splide Gap & Padding Demo</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css"><style>
    .splide__slide img {
      display: block;
      width: 100%;
      height: 300px; /* 固定高度便于预览 */
      object-fit: cover;
    }
  </style><section class="splide" aria-label="Image Carousel"><div class="splide__track">
      <ul class="splide__list">
<li class="splide__slide"><img src="https://picsum.photos/id/200/800/600?x-oss-process=image/resize,p_40" alt="Nature 1"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/201/800/600?x-oss-process=image/resize,p_40" alt="Nature 2"></li>
        <li class="splide__slide"><img src="https://picsum.photos/id/202/800/600?x-oss-process=image/resize,p_40" alt="Nature 3"></li>
      </ul>
</div>
  </section><script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script><script>
    new Splide('.splide', {
      type: 'loop',
      gap: '1.5rem',    // 滑块间横向间距
      padding: '2rem',  // 容器左右内边距（首尾留白）
      perPage: 3,       // 每页显示数量（影响可视滑块数）
      autoWidth: false, // 确保宽度由 CSS 控制，非内容自适应
      height: '300px',
      arrows: true,
      pagination: true,
    }).mount();
  </script>