Swiper (ion-slides) breakpoints aren't working

Ionic Framework ionic-v3
1

Hy!

I am having issues with ion-slides, since they’re not responsive at all. I defined the breakpoints in the options of a slider but they just don’t seem to work. If I change “slidesPerView” out of the breakpoint object then it is working generaly, but for breakpoints it doesn’t.

This is my view:

<ion-slides [options]="mySlideOptions" padding>
    <ion-slide *ngFor="let item of items">
        <h2>{{ item.title }}</h2>
        <content-item [item]="item" ></content-item>
    </ion-slide>
</ion-slides>

And config in component:

public mySlideOptions = {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 5, // change of that property works fine
    spaceBetween: 50,
    paginationClickable: true,
    breakpoints: {
        1024: {
            slidesPerView: 4, // these don't work
            spaceBetween: 40
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 30
        },
        640: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        320: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    }
};

Can you help me with that?

Thanks in advance!

1 Like
2

i got same problem. how can we continue with this???

3

I got same problem. Help!

4

I think Ionic is wrapping older version of swiper. I use below component. It works