typescriptionic-frameworkionic4ion-slides

Ionic 5 Slides ionSlideDidChange not called for last slide


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?


Solution

  • 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.