CODEWITHSUNDEEP
angulartypescriptionic-frameworkion-slides
Keerthan H.S.
Keerthan H.S.

Reputation: 1

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

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 ?

Upvotes: 0

Views: 1499

Answers (2)

vinu iyer
vinu iyer

Reputation: 31

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

Upvotes: 3

mjoy
mjoy

Reputation: 25

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

Upvotes: 0

Related Questions