Swiper网格视图：如何修改幻灯片的排列顺序？

你只需要修改Swiper网格布局的填充方向配置，即可实现期望的排列顺序：

步骤1：修改核心配置项 #

将原代码中的grid-fill="row"替换为grid-fill="column"，修改后的完整代码如下：

<swiper-container class="mySwiper" slides-per-view="3" grid-rows="2" grid-fill="column" [navigation]="false"
    space-between="30">
    <swiper-slide *ngFor="let item of lists;">
      <div>
        {{item.name}}
      </div>
    </swiper-slide>
 </swiper-container>

配置逻辑说明 #

• grid-fill="column"：切换为列优先填充模式，幻灯片会先填满每一列的指定行数，再自动切换到下一列，完全匹配你期望的排列逻辑。
• slides-per-view="3"：控制网格的列数（每行显示3列）。
• grid-rows="2"：控制每列的行数（每列最多显示2个幻灯片）。

若需调整每列的行数，直接修改grid-rows的值即可。

版本注意事项 #

请确保使用Swiper 8及以上版本，该版本开始完整支持grid-fill="column"的列优先填充功能。

内容的提问来源于stack exchange，提问作者Meenal Gupta