swiper 默认按单个滑块（slide）进行翻页，当启用多列布局时，可通过 slidespergroup 与 slidesperview 同步设置，使导航按钮和分页器均以“可视页面”为单位切换，从而实现真正的分页式体验。
swiper 默认按单个滑块（slide）进行翻页，当启用多列布局时，可通过 slidespergroup 与 slidesperview 同步设置，使导航按钮和分页器均以“可视页面”为单位切换，从而实现真正的分页式体验。
在多列轮播场景中（例如每屏显示 3 张卡片），用户通常期望「点击下一页」直接跳转到下一组卡片（即整页滚动），而非逐张滑动；同时，分页器（pagination bullets）也应按“页”而非“项”生成。Swiper 原生支持该行为，关键在于正确配置 slidesPerGroup。
核心配置原则
slidesPerGroup 必须与当前生效的 slidesPerView 保持一致：
- 当 slidesPerView: 3 时，设 slidesPerGroup: 3；
- 此时每次点击「Next/Prev」按钮将滚动 3 张 slide，分页器 bullet 数量 = Math.ceil(totalSlides / slidesPerView)；
- 分页器自动按页渲染，且 swiper.slideTo() 等方法也以页为单位定位。
响应式示例（推荐写法）
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: {
320: {
slidesPerView: 1,
slidesPerGroup: 1,
},
768: {
slidesPerView: 2,
slidesPerGroup: 2,
},
1200: {
slidesPerView: 3,
slidesPerGroup: 3,
},
1700: {
slidesPerView: 4,
slidesPerGroup: 4,
}
}
});
注意事项
- ❗ slidesPerGroup 不能小于 slidesPerView，否则可能引发分页错位或导航异常；
- 若启用了 loop: true，需确保总 slide 数 ≥ slidesPerView × 2，否则 slidesPerGroup 在循环模式下可能失效；
- 自定义分页器逻辑（如手动渲染 bullet）时，应基于 swiper.slides.length / swiper.params.slidesPerView 计算页数，并向上取整（Math.ceil）；
- 使用 swiper.slideTo(pageIndex) 跳转时，pageIndex 指的是页索引（从 0 开始），而非 slide 索引。
通过精准对齐 slidesPerView 与 slidesPerGroup，Swiper 即可无缝实现符合用户直觉的“整页导航 + 页级分页”，大幅提升多列轮播的交互专业性与可用性。
