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

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.

jul-09-2017 23-24-31

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 16 (5 by maintainers)

Most upvoted comments

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?

marcovtwout on Sep 15, 2017

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);
    }
}

Acika00mk on Jul 27, 2018

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.

jgw96 on Jul 20, 2017