How to create multi row swiper slider in Ionic 7?

Ionic Framework Ionic Angular
1

I am trying to achieve this:
https://user-images.githubusercontent.com/17045072/101984191-e3383180-3c90-11eb-8bed-09f4be40397f.png
Using grid in swiper-container shows all slides in one column. I am using standalone components.

2

Search for “grid” on this page - https://swiperjs.com/demos - then check out the provided code samples that demonstrate how to do it.

3

Got it working in ionic angular using:

  <swiper-container
    class="featured_mag"
    [loop]="false"
    pagination="true"
    [autoplay]="{delay: 5000}"
    [followFinger]="true"
    pagination-clickable="true"
    slides-per-view="2"
    slides-per-group="4"
    [grid]="{'rows':2,'fill': 'rows'}"
    css-mode="false" >

    <swiper-slide>
      <div class="slide_content">

      </div>
</swiper-slide>

</swiper-container>
1 Like