CODEWITHSUNDEEP
typescriptionic-frameworkionic4ion-slides
Ioan Moldovan
Ioan Moldovan

Reputation: 2422

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?

Upvotes: 3

Views: 3930

Answers (2)

Ruben Miquelino
Ruben Miquelino

Reputation: 1117

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

};

Upvotes: 1

Ioan Moldovan
Ioan Moldovan

Reputation: 2422

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.

Upvotes: 4

Related Questions