How to change slidesPerView depending upon the screen size in Ionic?

Question

I was working on an ionic project where I have created slider using ion-slides. I need to display some multiple products in that slider. For a portrait view I've display 1.25 views per slide (ie., slidesPerView = 1.25) which is working totally fine. I need to display 2.25 slides per view for landscape view. Is there any solution to do it dynamically ?

You can use Screen Rotation plugin to detect rotation and update slider Options. https://ionicframework.com/docs/native/screen-orientation — Najam Us Saqib, Feb 20 '21 at 08:20

score 3 · Answer 1 · answered Nov 13 '21 at 08:41

In the sliderOptions array add an breakpoint property.

slideOpts = {
    slidesPerView: 3,
    spaceBetween: 10,
    breakpoints: {
        // when window width is >= 320px
        320: {
          slidesPerView: 1,
        },
        // when window width is >= 480px
        480: {
          slidesPerView: 1,
          spaceBetween: 30
        },
        // when window width is >= 640px
        640: {
          slidesPerView: 2,
          spaceBetween: 40
        }
      }
};

score 0 · Answer 2 · answered Jun 17 '21 at 09:35

0

If you set the slidesPerView = 'auto', I think it could work.

answered Jun 17 '21 at 09:35

mjoy

15
7

How to change slidesPerView depending upon the screen size in Ionic?

2 Answers2