Swiper.js是一款轻量且功能强大的轮播滑动插件，支持多种自定义滑动效果，其中多张幻灯片分组滑动是实际开发中非常常见的需求，比如需要一次滑动展示3张商品卡片，再次滑动再展示下一组3张卡片的场景，就可以通过Swiper的内置配置快速实现。
核心配置参数说明
实现分组滑动不需要额外编写复杂的逻辑，只需要正确配置Swiper的两个核心参数即可，下面分别介绍这两个参数的作用：
- slidesPerView：设置容器同时可见的幻灯片数量，比如设置为3，就表示轮播容器同一时间会展示3张幻灯片。
- slidesPerGroup：设置每次滑动时切换的幻灯片数量，比如设置为3，就表示每次滑动会一次性切换3张幻灯片，也就是一组3张的内容。
这两个参数需要配合使用，通常slidesPerGroup的值不会超过slidesPerView的值，否则会出现滑动后可见区域内容不完整的问题。
基础分组滑动实现示例
下面是一个一次滑动3张幻灯片的基础示例，包含完整的HTML、CSS和JS代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper分组滑动示例</title>
<!-- 引入Swiper的CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<style>
.swiper {
width: 100%;
height: 200px;
margin-top: 50px;
}
.swiper-slide {
text-align: center;
line-height: 200px;
font-size: 24px;
color: #fff;
}
/* 给不同幻灯片设置不同背景色方便区分 */
.slide-1 { background-color: #409eff; }
.slide-2 { background-color: #67c23a; }
.slide-3 { background-color: #e6a23c; }
.slide-4 { background-color: #f56c6c; }
.slide-5 { background-color: #909399; }
.slide-6 { background-color: #409eff; }
.slide-7 { background-color: #67c23a; }
.slide-8 { background-color: #e6a23c; }
.slide-9 { background-color: #f56c6c; }
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide slide-1">幻灯片1</div>
<div class="swiper-slide slide-2">幻灯片2</div>
<div class="swiper-slide slide-3">幻灯片3</div>
<div class="swiper-slide slide-4">幻灯片4</div>
<div class="swiper-slide slide-5">幻灯片5</div>
<div class="swiper-slide slide-6">幻灯片6</div>
<div class="swiper-slide slide-7">幻灯片7</div>
<div class="swiper-slide slide-8">幻灯片8</div>
<div class="swiper-slide slide-9">幻灯片9</div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 引入Swiper的JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
// 初始化Swiper实例
const swiper = new Swiper('.swiper', {
// 每次滑动切换3张幻灯片
slidesPerGroup: 3,
// 容器同时可见3张幻灯片
slidesPerView: 3,
// 幻灯片之间的间距
spaceBetween: 10,
// 开启循环模式
loop: true,
// 分页器配置
pagination: {
el: '.swiper-pagination',
// 点击分页器可以切换分组
clickable: true,
},
});
</script>
</body>
</html>
常见适配问题处理
分页器显示分组数量
默认情况下分页器的点数量和幻灯片总数一致，如果需要分页器只显示分组的数量，可以设置pagination的type为fraction或者自定义分页器逻辑，也可以通过计算分组总数动态生成分页器内容。
循环模式下的分组兼容
开启loop: true循环模式时，Swiper会自动复制前后的幻灯片来保证循环流畅，此时slidesPerGroup的配置依然生效，不需要额外调整，只需要保证幻灯片总数是slidesPerGroup的整数倍，避免出现最后一组内容不足的问题。
响应式场景下的分组调整
如果需要在不同屏幕尺寸下设置不同的分组数量，可以使用breakpoints参数配置响应式规则，示例如下：
const swiper = new Swiper('.swiper', {
slidesPerGroup: 1,
slidesPerView: 1,
spaceBetween: 10,
breakpoints: {
// 屏幕宽度大于等于768px时的配置
768: {
slidesPerGroup: 2,
slidesPerView: 2,
},
// 屏幕宽度大于等于1024px时的配置
1024: {
slidesPerGroup: 3,
slidesPerView: 3,
}
}
});
总结
Swiper.js实现多张幻灯片分组滑动的核心就是合理配置slidesPerGroup和slidesPerView两个参数，不需要编写额外的滑动逻辑。实际开发中可以根据需求结合循环模式、分页器、响应式配置等特性，快速实现符合业务要求的分组滑动轮播效果，适配不同的场景需求。
Swiper.jsslidesPerGroupslidesPerView分组滑动修改时间：2026-07-06 17:03:35