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 ?

Answer 1

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

Answer 2

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
        }
      }
};