bug: ionSlideDidChange not called for last slide

[rubenmiq]

Bug Report

Ionic version: [x] 5.x

Current behavior: When the last slide is selected, the change event does not trigger

Expected behavior: ionDidChangeEvent should trigger on the last slide

Steps to reproduce: Make sure the browser window is on mobile size. Keep sliding the slides until the last slide is show. Check that the label with the index that changes on every slide does not change on the last slide,

Related code:

https://github.com/rubenptm/test-slider --> home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-text-center">
  {{ indexChanged }}<br><br><br>
  <ion-slides pager="false" [options]="slideOpts" (ionSlideDidChange)="slideChange()" #slides>    
    <ion-slide>
      Slide 1
    </ion-slide>
    <ion-slide>
      Slide 2
    </ion-slide>    
    <ion-slide>
      Slide 3
    </ion-slide>
    <ion-slide>
      Slide 4
    </ion-slide>    
  </ion-slides>  
</ion-content>

home.page.ts

import { Component, ViewChild } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild('slides') slides: IonSlides;

  indexChanged: string='Current slide index: 0';

  slideOpts = {        
    initialSlide: 0,
    speed: 600,
    spaceBetween: 20,
    slidesPerView: 'auto',    
    slidesOffsetBefore: 30,
    slidesOffsetAfter: 30    
  };

  constructor() {}

  slideChange() {           
        this.slides.getActiveIndex().then(index => {      
      this.indexChanged = 'Current slide index:'+index;
    });
  }

}

home.page.scss

ion-slides {
  height: 200px;
  ion-slide {
    background-color: red;    
    width: 260px !important;    
  }
}

Other information: https://stackoverflow.com/questions/62049214/ionic-5-slides-ionslidedidchange-not-called-for-last-slide

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.0 (C:\Users\Ruben\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.4.1
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Utility:

   cordova-res : 0.15.2
   native-run  : 0.2.2

System:

   NodeJS : v12.17.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.8
   OS     : Windows 10

[KirstenStake]

having this same issue. had to use the suggested answer in the linked stack overflow issue above as my solution for now:

<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;  // length of the ngFor you are using for the slides
      }
      // You can now use real index 
    });
  }

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-slides in favor of using Swiper.js directly.

Moving forward, ion-slides will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for carousels in their apps. Since ion-slides currently uses Swiper under the hood, the behavior of your carousels should remain the same even after you migrate.

For more information on the reasoning for and benefits of this change, please see the ion-slides documentation.

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.