getActiveIndex() returning wrong index

[ionitron-bot[bot]]

Original issue by @AlGantori on 2016-08-09T04:57:46Z

Short description of the problem:

I setup a simple 4 images sliders, however I see several issues.

  <ion-slides [options]="mySlideOptions"  #mySlider (ionDidChange)=SlideChanged()>
  <ion-slide>
    <h1>Slide 1</h1>
    <img  src="http://arabicrescue.com/ARABIC/LETTERS.BMP/400_1/01.png" >
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
    <img  src="http://arabicrescue.com/ARABIC/LETTERS.BMP/400_1/02.png" >
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
    <img  src="http://arabicrescue.com/ARABIC/LETTERS.BMP/400_1/03.png" >
  </ion-slide>
    <ion-slide>
    <h1>Slide 4</h1>
    <img  src="http://arabicrescue.com/ARABIC/LETTERS.BMP/400_1/04.png" >
  </ion-slide>
</ion-slides>

1) Initially the slider is not responsive to slideNext(), slidePrevious(), slideTo() calls , until the pane containing the app in the browser is manually nudged/resized.

2) this.slider.getActiveIndex() returns wrong index (after calls to slider.slideNext(). For example, the console would display indexes of 4 and 5 which are invalid. I expect 0 thru 3, given 4 images slides :

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
plugin.js:32 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
swiper-widget.js:992 swiper initEvents attach
about.ts:48 slide CHANGED 5
about.ts:48 slide CHANGED 2
about.ts:48 slide CHANGED 3
about.ts:48 slide CHANGED 4
about.ts:48 slide CHANGED 5
about.ts:48 slide CHANGED 2
about.ts:48 slide CHANGED 3
about.ts:48 slide CHANGED 4
about.ts:48 slide CHANGED 5
about.ts:48 slide CHANGED 0
about.ts:48 slide CHANGED 3
about.ts:48 slide CHANGED 2
about.ts:48 slide CHANGED 1
about.ts:48 slide CHANGED 0
about.ts:48 slide CHANGED 3

What behavior are you expecting?

I expect the getActiveIndex() to return valid indexes 0 thru array of objects length - 1 I expect ionDidChange to fire on displaying the first slide, it did not.

I expect the slideNext() and slidePrev() and animation if set in the option to work, however, it requires the browser to be manually resized before it starts to work.

Steps to reproduce:

1. Press the NEXT button, you see the ionDidChange firing causing a the display of indexes 5, 2, 3, 4, ... which seems bogus
2. Pressing the PREVIOUS button starts showing the correct slide indexes 0, 3, 2, 1, 0, ...

  // 20160808
  SlideChanged() {
    console.log("slide CHANGED", this.slider.getActiveIndex());
  }

Which Ionic Version? 1.x or 2.x ionic@beta See ionic info below

Plunker that shows an example of your issue

http://plnkr.co/edit/7oP3HOsUhlwEmcvCgZED?p=preview

I could not get plunker to work the moment I added the code to home.ts home.html worked loading the images initially. (see update in followup comment)

Run ionic info from terminal/cmd prompt: (paste output below) ionic info shows: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Windows 7 SP1 Node Version: v4.3.0

.END.

[franzisk]

You should use like this:

slideChanged(event ? : any) {
    console.log('Changed slide index: '+event.realIndex);
  }

...

 <ion-slides (ionSlideDidChange)="slideChanged($event)" >
...
<ion-slides>

[atopion]

In case anyone (like me) still searches for a workaround, in ionic 5.2.1 this is possible:

<ion-slides (ionSlideDidChange)="slideChanged($event)" > ... </ion-slides>  

...  

slideChanged($event) {  
    console.log("Real Index: ", $event.target.swiper.realIndex);
} 

[mykola-yakovliev]

It's 2020 and developers still have to place a link in comments to this issue in order to explain the weird code. Any progress?

[ihorbond]

Came here because of wrong indexes issue when in the loop mode too. Wonder if the original library has the same problem or is it just Ionic's wrapper ?