swiper slidesPerColumn 2列 轮播一行三个有两行 内容不同

你可以使用Swiper库来实现这个效果。在Swiper的初始化配置中，设置slidesPerColumn为2，即每列显示2个轮播项。然后，可以使用Swiper的HTML结构来定义轮播项的内容。

以下是一个示例：

HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">轮播项1</div>
    <div class="swiper-slide">轮播项2</div>
    <div class="swiper-slide">轮播项3</div>
    <div class="swiper-slide">轮播项4</div>
    <div class="swiper-slide">轮播项5</div>
    <div class="swiper-slide">轮播项6</div>
  </div>
</div>

初始化Swiper：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  slidesPerColumn: 2,
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

在上面的示例中，每个轮播项使用swiper-slide类定义，你可以根据需要自定义样式。通过设置slidesPerView为3，每行显示3个轮播项，slidesPerColumn为2，表示有2行轮播项。spaceBetween用于定义轮播项之间的间距。pagination用于显示分页器，你可以根据需要自定义样式。

希望对你有帮助