如何使用 Swiper 每列显示 10 张幻灯片？

Question

我需要每栏显示 10 张幻灯片。我正在使用刷卡器。我需要如下图所示的视图。但是 slidesPerColumn: 10 将幻灯片分组并像 slidesPerColumn: 6 一样展示。如何提供如下图所示的视图？

代码片段（Swiper 4.4.6）： https://codepen.io/ZaAz28/pen/qBmQeeE

代码片段（最新的Swiper）： https://codepen.io/ZaAz28/pen/oNWJvLL

Answer 1

.swiper-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto auto auto auto auto auto auto; // here is the amount of slidesPerColumn you want
      grid-auto-flow: column;

      & > .swiper-slide {
        height: fit-content;
      }
    }