getActiveIndex() returning wrong index

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.

[PhilippStein]

In Ionic 2 Final the realIndex property is exposed but not documented. See https://github.com/driftyco/ionic/blob/aadf9312687963962913a8d51b3a225eedff296e/src/components/slides/slides.ts#L795

So the following is enough now:

<ion-slides #mySlider>
  <ion-slide *ngFor="let foo of bars">....

and: let realIndex = this.mySlider.realIndex

[ganySA]

This issue seems to relate to using “loop” option. This then inserts some additional slides.

I have 3 slides and i would like to update slides based on the current slide but with the index’s changing constantly i am not sure how i can make this possible.