本文详解如何通过 swiper 的 slidespergroup 配合 slidesperview，实现真正的“分页式”导航——即点击 next/prev 按钮跳转整页（一组幻灯片），且分页器（pagination）圆点数量与可视页数严格对应，而非总 slide 数量。
本文详解如何通过 swiper 的 slidespergroup 配合 slidesperview，实现真正的“分页式”导航——即点击 next/prev 按钮跳转整页（一组幻灯片），且分页器（pagination）圆点数量与可视页数严格对应，而非总 slide 数量。
在默认配置下，Swiper 的导航按钮和分页器均以单个 slide 为单位：即使设置了 slidesPerView: 3（每屏显示 3 张卡片），点击「下一帧」仍只滚动 1 张，而分页器会为每个 slide 生成一个圆点（如共 12 张 slide → 12 个圆点），造成体验割裂与逻辑冗余。
要实现真正的“页”级导航（即：一次切换 = 切换一整屏内容，分页器仅反映页数），核心在于让 Swiper 将每组 slidesPerView 个 slide 视为一个逻辑单元——这正是 slidesPerGroup 的作用。
✅ 正确做法：
将 slidesPerGroup 设置为与 slidesPerView 完全相等的值。这样 Swiper 会强制对齐分组边界，使导航、分页、拖拽均以“页”为粒度响应。
const swiper = new Swiper('.swiper', {
slidesPerView: 3,
slidesPerGroup: 3, // 关键：与 slidesPerView 保持一致
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
当存在响应式需求（例如不同屏幕宽度下每页显示数量不同），需在 breakpoints 中同步设置二者：
const swiper = new Swiper('.swiper', {
slidesPerView: 1,
slidesPerGroup: 1, // 默认基础值（移动端）
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
},
1200: {
slidesPerView: 3,
slidesPerGroup: 3,
},
1700: {
slidesPerView: 4,
slidesPerGroup: 4,
}
},
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
pagination: { el: '.swiper-pagination', clickable: true },
});
⚠️ 注意事项：
- slidesPerGroup 必须是整数，且建议始终等于 slidesPerView（除非有特殊分组逻辑）；
- 若 slidesPerView 为 'auto'，则 slidesPerGroup 无法生效，必须使用固定数值；
- 启用 centeredSlides 时，需额外验证分组对齐效果，必要时配合 loop: true 确保首尾平滑；
- 分页器圆点数量 = Math.ceil(totalSlides / slidesPerView)，Swiper 内部自动计算，无需手动干预。
总结：slidesPerGroup: N + slidesPerView: N 是 Swiper 实现专业级分页导航的黄金组合。它不仅统一了按钮、分页器与手势拖拽的行为粒度，更显著提升用户对当前“页码”的感知清晰度，是构建企业级轮播组件的必备实践。
