getting getActiveIndex wrong in ionic slider

Question

I have only 5 images and below configuration

 slideOpts = {
    slidesPerView: 4.25,
    centeredSlides: true,
    initialSlide: 2,
    speed: 400,
    centeredSlidesBounds: true,
    spaceBetween: 0,
    loop: true
  };

now when I slide to have selected slide value

 getSlideIndex(){
   this.slides.getActiveIndex().then(
     (index)=>{
       this.currentIndex = index;
    });
  }

HTML

 <ion-slides [options]="slideOpts" (ionSlideDidChange)="getSlideIndex()"
                  [ngClass]="{'cs-slider-loaded': slidesEnabled}">
                  <ion-slide *ngFor="let s of slidesItems">
                    <div class="main-wrap">
                      <div class="loading-image">
                        <div class="img-shadow"></div>
                        <div class="game-react" *ngIf="s.sideImg">
                          <img src="{{s.sideImg}}" />
                        </div>
                        <img src="{{s.image}}" class="slidemain_img" alt="" />
                      </div>
                    </div>
                  </ion-slide>
                </ion-slides>

Here this.currentIndex is wrong, I am getting sometimes 12, 11, 9, 7 whereas I have only 5 images in the loop

Answer 1

Wrong implementation of Ionic events, you need to use event object.

getSlideIndex(event) {
  event.target.getActiveIndex().then(
    (index)=>{
      this.currentIndex = index;
    });
}

HTML

<ion-slides [options]="slideOpts" (ionSlideDidChange)="getSlideIndex($event)"
...