Ionic-framework: bug(ion-slides): getActiveIndex() can go out of bounds

[dylanvdmerwe]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If you have an ionSlideDidChange event attached to ion-slides and in this method you call getActiveIndex(), on the last slide in ion-slides if you continue swiping at the end of the slides, the index will sometimes move to the next item.

So for example, if you have 4 slides and you keep on swiping at the end of the slides, getActiveIndex() can return 4 when 3 should be the very last index.

This can break bindings when looping through arrays.

Expected behavior:
getActiveIndex() should never go out of bounds.

Related code:
It is very simple to reproduce:

<ion-content>
  <ion-slides #slides pager='true' (ionSlideDidChange)="onSlideChanged()">
    <ion-slide *ngFor='let slide of slideData'>
      <h1>{{slide}}</h1>
    </ion-slide>
  </ion-slides>
</ion-content>

export class HomePage {
  @ViewChild('slides') slides: Slides;
  slideData: number[] = [];

  constructor(public navCtrl: NavController) {
    this.slideData = [1, 2, 3, 4];
  }

  onSlideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    console.log(currentIndex);
  }
}

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 5.1.0

[jgw96]

Hello, thanks for opening an issue with us. We will look into this.

[dylanvdmerwe]

What further info do you need @jgw96 ?

[jgw96]

hey @dylanvdmerwe , im having a little trouble reproducing this one. Are you able to reproduce this on a device?

[stevengunneweg]

@jgw96 I have been able to reproduce this on a device.
When a user swipes to the next page while on the last page, the swiper-slide-active class is no longer present on the visible slide.
Also if you do getActiveIndex() you get an index that is 1 more than it should be (as can be seen in the gif @dylanvdmerwe made).

[jgw96]

Hello all. Just wanted to update that i can now in fact reproduce this. I will keep this thread updated on the progress of this. Unfortunately, from a preliminary look it looks like this may be an issue on the swiper side of things and not actually in the slides code. This will most likely make it a little harder to track down, but we will get it knocked out.

[dylanvdmerwe]

Guys this is causing mayhem. Please can this be looked into.

[ghost]

Hey has there been any progress on this issues?

[marcovtwout]

The original component also has a property realIndex, which is also useful when looping slides: https://github.com/nolimits4web/Swiper/blob/master/CHANGELOG.md#swiper-340---released-on-october-16-2016

Try this.slides.realIndex instead of this.slides.getActiveIndex();. Does this solve your problem?

[ghost]

Awesome thanks @marcovtwout that worked

[OlaAlsaker]

@marcovtwout thanks, it solves the problem!

[adityausathe]

thanks @marcovtwout , it saved my day

[Acika00mk]

There is a workaround
It can help in some cases :
html :
<ion-slides [centeredSlides]="true" (ionSlideDidChange)="slideChange($event)"> ... .</ion-slides>
ts:

private slideChange(slides): void {
   if(slides.getActiveIndex() < slides._slides.length){
      // index is in boound
    } else {
     // index out of bounds 
     // go back
      slides.slideTo(slides._slides.length -1);
    }
}

[rholtermann]

Hi @jgw96,

has there been any solution for this bug?
We ran into it as well. The 'realIndex' solved our problem, but i wonder why the bug is still in the code?

[JaponicaGR]

Still an issue.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/32