Ionic 5 Slides ionSlideDidChange not called for last slide

Question

I'm currently using ion-slides (in Ionic 5) and have problem getting selected slide index for last slide. This problem happens after I set slidesPerView to 1.3.

Even ionSlideDidChange event doesn't get triggered when I tried to slide to last slide(When I slided to other slides event got trigged fine.)

<ion-slides #subscriptionSlider [options]="slideOpts" pager="true" (ionSlideDidChange)="ionSlideDidChange()">

I think there's problem with Ionic side because getActiveIndex also works incorrect if I'm on last slide(it returns last second slide index though)

Has anyone faced this issue before?

can you create stackblitz to reproduce this issue? – Sergey Rudenko May 27 '20 at 19:04 — Sergey Rudenko, May 27 '20 at 19:04
i am getting this same error and haven't found a fix yet – Kirsten May 25 '21 at 05:14 — Kirsten, May 25 '21 at 05:14

score 4 · Accepted Answer · answered May 27 '20 at 23:42

Solved problem using ionSlideTouchEnd event

Here's code

<ion-slides #subscriptionSlider [options]="slideOpts" pager="true" (ionSlideTouchEnd)="ionSlideTouchEnd($event)">
...
</ion-slides>

// And then in ts file
ionSlideTouchEnd(event) {
    this.subscriptionSlider.getActiveIndex().then(index => {
      let realIndex = index;
      if (event.target.swiper.isEnd) {  // Added this code because getActiveIndex returns wrong index for last slide
        realIndex = this.subscriptions.length - 1;
      }
      // You can now use real index 
    });
  }

Hope this help others having problem with active index for ion-slides in Ionic 5.

Nice tweak. Did you reported this to the ionic team? – Ruben Miquelino Oct 28 '20 at 15:48 — Ruben Miquelino, Oct 28 '20 at 15:48

Ruben Miquelino · Answer 2 · 2021-02-03T20:20:11.060

I fixed this in another way. This problem only happens with me when I have a specific width set on the scss file so i can show multiple slides in one page.

What i did was set a decimal value of slides to show. But of course if you need a fixed width its still not working. I raised an issue on ionics github, that is under triage.

slideOpts = {
initialSlide: 0,
speed: 400,
spaceBetween: 20,
slidesPerView: 1.5,
centeredSlides: true,
centeredSlidesBounds: true,
slidesOffsetBefore: 30,
slidesOffsetAfter: 30

};

Ionic 5 Slides ionSlideDidChange not called for last slide

2 Answers2