本文详解如何通过 gap 和 padding 配置，结合 CSS 重置图片宽度，在 Splide 中正确实现滑块之间的水平间距（gap）及容器两侧内边距（padding），解决滑块紧贴、无间隔的常见布局问题。
本文详解如何通过 `gap` 和 `padding` 配置，结合 css 重置图片宽度，在 splide 中正确实现滑块之间的水平间距（gap）及容器两侧内边距（padding），解决滑块紧贴、无间隔的常见布局问题。
Splide 默认不会自动为 .splide__slide 元素添加外边距或间隙，因此即使设置了 gap 选项，若子元素（如 <img alt="如何在 Splide 轮播图中实现滑块间间距与侧边留白" >）未占满滑块容器宽度，视觉上仍可能看不到预期的间距效果。关键在于：gap 控制的是滑块容器（.splide__slide）之间的 CSS gap（仅对 Flex/Grid 布局生效），而图片自身尺寸必须适配容器，否则会因缩放、溢出或塌陷导致间距失效。
✅ 正确配置步骤
-
启用
gap并指定带单位的值gap选项需传入带单位的字符串（如'20px'、'3rem'），而非纯数字。Splide 内部会将其转换为.splide__list的gapCSS 属性（要求其 display 为flex或grid，默认即为flex）：new Splide('.splide', { type: 'loop', gap: '2rem', // ✅ 正确：带单位 padding: '2rem', // 左右内边距，使首尾滑块不贴边 perPage: 3, // 可选：配合 gap 实现多图并排 }).mount(); -
确保图片 100% 填充滑块容器
默认<img alt="如何在 Splide 轮播图中实现滑块间间距与侧边留白" >为内联元素，宽度由内容决定，易造成高度塌陷或错位。必须显式设置：.splide__slide img { display: block; width: 100%; height: auto; object-fit: cover; /* 可选：保持比例裁剪填充 */ }若使用背景图方案，也可改用
background-image+background-size: cover，但语义化和可访问性推荐<img alt="如何在 Splide 轮播图中实现滑块间间距与侧边留白" >。 -
检查并引入完整资源
确保已正确加载 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>
? 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<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>
</head>
<body>
<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" alt="Nature 1"></li>
<li class="splide__slide"><img src="https://picsum.photos/id/201/800/600" alt="Nature 2"></li>
<li class="splide__slide"><img src="https://picsum.photos/id/202/800/600" 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>
</body>
</html>⚠️ 注意事项
-
gap仅作用于.splide__list的 Flex 子项（即.splide__slide），无法影响图片内部间距； -
padding是容器级内边距，影响整个轮播区域的左右空白，不改变滑块自身宽度； - 若使用
autoWidth: true，需额外通过widthCSS 控制单个滑块尺寸，否则gap可能表现异常； - 在响应式场景中，建议用
rem或%单位定义gap/padding，避免固定像素在小屏下过宽； - 如需垂直间隙（如多行轮播），需启用
direction: 'ttb'并配合gap生效。
通过以上三步——正确配置带单位的 gap 与 padding、强制图片 100% 宽度、确保资源加载完整——即可稳定实现如官方 Demo 所示的优雅滑块间距效果。
