反应 swiper slidesPerColumn 不工作

Question

我想在一张幻灯片中垂直显示三个项目。

react swiper官方文档说使用slidesPerColumn。

所以，我尝试使用它，但是，它说 Swiper 没有 slidesPerColumn 属性。

如何组织如下图所示的幻灯片？

Answer 1

我没有使用 swiper，因此我不确定这个解决方案是否仍然正确，但这里是： 问题是 3 年前关于同样的问题打开的https://github.com/nolimits4web/swiper/issues/3754。人们肯定和你有同样的问题，解决这个问题的方法是： '无论如何，“我”找到了一个解决方法，使用 display: grid on .swiper-wrapper 而不是默认的 flex'

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

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