swiper 轮播一行三个两行

要实现一行三个两行的轮播，可以使用swiper的slidesPerView参数来设置每行显示的数量。假设每行显示3个，那么每次滑动的距离应该是每行的宽度。

以下是一个示例代码：

HTML部分：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
</div>

CSS部分：

.swiper-slide {
  width: calc(100% / 3);
  height: 100px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-container {
  width: 100%;
  height: 200px;
}

JavaScript部分：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3, // 每行显示的数量
  spaceBetween: 10, // 间距
  slidesPerGroup: 3, // 每次滑动的数量
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

上述示例中，每个swiper-slide代表一个轮播项，通过CSS设置每个轮播项的宽度为父容器宽度的1/3，高度为固定的100px。在JavaScript中，设置slidesPerView为3，表示每行显示3个轮播项，slidesPerGroup为3，表示每次滑动3个轮播项。

最后，通过swiper-container类创建一个Swiper实例，并通过navigation参数设置了上一页和下一页的按钮。

通过上述代码，就可以实现一行三个两行的轮播效果