如何使用 swiper 设置不同的设备来渲染不同的布局？答案

【问题标题】：How to use swiper to set different devices to render different layouts?如何使用 swiper 设置不同的设备来渲染不同的布局？
【发布时间】：2022-08-17 15:45:50
【问题描述】：

我在工作中遇到问题，需要您的帮助！

公司目前使用的swiper是5.2.0版本，目前有以下需求。

要显示的照片总数为 12 组。在手机上，一栏是三栏，而在电脑上，每栏是两栏。我画了一个示意图，但无论怎么设置，都无法顺利达到这样的效果。，不知道大家是否知道如何设置来实现呢？

提前感谢您观看我的问题。

var mySwiper = new Swiper(\'.swiper\', {

  pagination: {
    el: \'.swiper-pagination\',
  },
      

  navigation: {
    nextEl: \'.swiper-button-next\',
    prevEl: \'.swiper-button-prev\',
  },
  

  breakpoints: { 
      400: {  
         slidesPerView: 1,
         slidesPerColumn: 3,
      },
      1024: {  
         slidesPerView: 2,
         slidesPerColumn: 2,
      },
    }
})

<link href=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.css\" rel=\"stylesheet\"/>
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/js/swiper.js\"></script>
<div class=\"swiper-container\">
  <div class=\"swiper-wrapper\">
    <div class=\"swiper-slide\">slider1</div>
    <div class=\"swiper-slide\">slider2</div>
    <div class=\"swiper-slide\">slider3</div>
    <div class=\"swiper-slide\">slider4</div>
    <div class=\"swiper-slide\">slider5</div>
    <div class=\"swiper-slide\">slider6</div>
    <div class=\"swiper-slide\">slider7</div>
    <div class=\"swiper-slide\">slider8</div>
    <div class=\"swiper-slide\">slider9</div>
    <div class=\"swiper-slide\">slider10</div>
    <div class=\"swiper-slide\">slider11</div>
    <div class=\"swiper-slide\">slider12</div>
  </div>

  <div class=\"swiper-pagination\"></div>
    

  <div class=\"swiper-button-prev\"></div>
  <div class=\"swiper-button-next\"></div>
</div>

标签： javascript css swiper.js swiperefreshlayout

【解决方案1】：

尝试这个 https://jsfiddle.net/0nf6rq8d/2/

var mySwiper = new Swiper('.swiper', {

  pagination: {
    el: '.swiper-pagination',
  },
      

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  slidesPerView: 1,
  slidesPerColumn: 3,
  slidesPerColumnFill: 'row',

  breakpoints: {
      1024: {  
         slidesPerView: 2,
         slidesPerColumn: 2
      },
    }
})

【讨论】：