SwiperJS网格布局：幻灯片顺序与列行数显示异常求助

问题描述 #

使用Swiper ^11.0.5版本，配置如下想实现单视图1列3行的分页效果：

• slidesPerView: 1
• grid: { rows: 3, fill: "row" }

实际效果不符合预期：

• 第一页仅显示2个幻灯片（1、3）
• 幻灯片顺序混乱，第二页显示2、4
• 尝试移除fill属性后所有幻灯片挤在第一页；修改.swiper-wrapper的CSS为display:grid; grid-template-rows: repeat(3, 1fr);无效；slidesPerColumn属性在当前版本已失效。

预期效果
第一页显示：
1
2
3
第二页显示：4

解决方案 #

问题根源在于grid.fill的取值和分页分组配置错误，调整如下：

1. 修改Grid填充方式
   将grid.fill设置为"column"，Swiper会优先按列填充行，符合竖排顺序需求。

2. 设置分页分组数量
   添加slidesPerGroup: 3，确保每次滑动切换刚好一组（3个幻灯片），对应一页的3行内容。

3. 确保容器与幻灯片高度匹配
   保持容器高度为幻灯片高度的3倍（比如每个幻灯片100px，容器设置300px），避免布局错位。

完整配置示例 #

// Vue环境中Swiper初始化配置
import { Swiper, Grid } from 'swiper';
import 'swiper/css';
import 'swiper/css/grid';

export default {
  mounted() {
    new Swiper('.swiper', {
      modules: [Grid],
      slidesPerView: 1,
      grid: {
        rows: 3,
        fill: 'column' // 改为按列填充
      },
      slidesPerGroup: 3, // 每组3个幻灯片，对应一页
      // 可选：添加分页导航（如果需要）
      pagination: {
        el: '.swiper-pagination',
      },
    });
  }
}

关键说明 #

• grid.fill: "column"：让幻灯片按列垂直排列，先填满当前列的3行，再切换到下一列（下一页）。
• slidesPerGroup: 3：强制Swiper以3个幻灯片为一组进行分页，避免剩余幻灯片打乱布局。
• 无需手动修改.swiper-wrapper的CSS，Swiper的Grid模块会自动处理网格布局。

内容的提问来源于stack exchange，提问作者Mary Ma