getActiveIndex of Ion-Slides when page is loaded

Ionic Framework Ionic Angular
1

Hi everyone Im working on a PWA which contains slider and Im using ionic slides to achieve that.
Everything works fine with slides but I have a problem which I couldn’t solve,
I need to get the active index of slides when page loads before user does anything more.
I realized that I can only get index AFTER page is loaded with events like after swiping slides
by user.
I tried different lifecycle hooks and none of them works.
So i tried “ionSlidesDidLoad” event and it returns wrong index
my .html

<ion-slides #theSlides [options]="slideOpts"  id="peerSlide" (ionSlidesDidLoad)="ionSlidesDidLoad(theSlides)">
    <ion-slide *ngFor="let peer of peers;let i = index">
           <img id="{{'x' + i}}" class="peerIcon"  >
    </ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/nextIcon@3x.png" (click)="moveToNext(theSlides)">
<img class="prevIcon" src="../../assets/imgs/prevIcon/prevIcon@3x.png" (click)="moveToPrev(theSlides)">

my .ts code

@ViewChild('theSlides' , {  static: true })  theSlides: IonSlides

moveToNext(slides) {
  slides.slideNext()
 //HERE GETACTIVEINDEX RETURNS CORRECT INDEX!
  slides.getActiveIndex().then((index: number) => {
    var value = this.peers[index]
    })
  
  
}

moveToPrev(slides) {
  slides.slidePrev();
  //HERE GETACTIVEINDEX RETURNS CORRECT INDEX!
  slides.getActiveIndex().then((index: number) => {
    var value = this.peers[index]
 })
  
ionSlidesDidLoad(slides) {
  //HERE RETURNS 1 EVERY TIME EVEN WHEN MY ARRAY HAS 1 ELEMENT AND IT SHOULD BE 0
  slides.getActiveIndex().then(
    (index:number) => {
      var value = this.peers[index]
    }
  )
  
}

so when ionSlidesDidLoad event fires getActiveIndex returns 1 even when the peers array has 1 element so this.peers[index] will be “undefined”
can you tell me whats wrong and how can I get the active index of slider when page loads?
Best regards

2

Hello @Taraa

Are you using ionic 5?