Swiper 默认按单个滑块（slide）进行导航，当启用多列视图时，可通过 slidesPerGroup 与 slidesPerView 同值配置，实现真正的“整页切换”，使分页器圆点数量、导航按钮行为均与可视区域页数一致。
swiper 默认按单个滑块（slide）进行导航，当启用多列视图时，可通过 `slidespergroup` 与 `slidesperview` 同值配置，实现真正的“整页切换”，使分页器圆点数量、导航按钮行为均与可视区域页数一致。
在 Swiper 中，当设置 slidesPerView: 3（即每页显示 3 张幻灯片）时，若未做额外配置，Next/Prev 按钮仍每次仅移动 1 张幻灯片，分页器（pagination）也会为每个 slide 生成一个圆点——这显然不符合“以页为单位”的交互预期。
解决方法是启用 滑块分组机制：将 slidesPerGroup 设为与 slidesPerView 相同的值。该参数表示“每次切换所移动的幻灯片数量”，也决定了分页器的计算粒度——Swiper 将按每组视为一页，自动调整 pagination 数量和 navigation 行为。
✅ 基础配置示例（固定三列布局）：
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,
},
});
✅ 响应式场景（不同断点下页宽变化）：
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 值严格相等；
- 若使用 centeredSlides: true，需额外验证视觉对齐效果，因分组切换可能影响居中逻辑；
- 分页器圆点数量 = Math.ceil(totalSlides / slidesPerGroup)，确保总数取整向上；
- 避免混用 loop: true 与非整除的 slidesPerView/slidesPerGroup 组合，否则可能导致分页错位或导航异常。
通过这一配置，Swiper 即可真正实现「一页一跳」的用户体验：点击 Next 按钮跳转至下一屏内容，分页器仅显示实际页数（如 12 张幻灯片、每页 3 张 → 共 4 个圆点），大幅提升多列轮播的可用性与专业感。
