javascriptcssswiper.jsswiperefreshlayout

How to use swiper to set different devices to render different layouts?

I have a problem at work and need your help!

The swiper currently used by the company is version 5.2.0 and currently has the following requirements.

The total number of photos to be displayed is 12 groups. On the mobile phone, there are three columns in one column, but on the computer, there are two columns in each column. I drew a schematic diagram, but no matter how I set it, I couldn’t achieve such an effect smoothly. , I don't know if you know how to set it up to achieve it?

Thanks in advance for watching my question.

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>

enter image description here

Solution

  • Try this 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
      },
    }
})