CODEWITHSUNDEEP
angularionic-framework
user9088454
user9088454

Reputation: 1122

How to get ion-slide index on click?

I want to get slide index on click, I have ion-slides and its options are per page 2.5 slide. When I try to get active index it getting zero(0).

here my code

@ViewChild(IonSlides, { static: false }) slides: IonSlides;
slideOpts = {
  slidesPerView: 2.5,
  zoom: false,
  slideShadows: true
};

getIndex() {
    this.slides.getActiveIndex().then((index) => {
      this.currentIndex = index;
      console.log(this.currentIndex);
    })
}

here my HTML

<ion-slides [options]="slideOpts" #slides>
  <ion-slide *ngFor="let item of items">
    <p>{{item.name}}</p>
  </ion-slide>
</ion-slides>

Upvotes: 0

Views: 1822

Answers (2)

Jaydeep Rathod
Jaydeep Rathod

Reputation: 422

Use let i=index to get index id. You can get an index like this:

slideOpts = {
    slidesPerView: 2.5,
    zoom: false,
    slideShadows: true
  };

  items = [
    {
      name: 'test1'
    },
    {
      name: 'test1'
    },
    {
      name: 'test1'
    },
    {
      name: 'test1'
    }
  ]

getSlideIndex(i: number) {
    console.log(i);
}

in Html

<ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let item of items; let i=index">
      <ion-row>
        <ion-button (click)="getSlideIndex(i)">
          {{item.name}}
        </ion-button>
      </ion-row>
    </ion-slide>
</ion-slides>

hope it helps you :)

Upvotes: 1

Mridul
Mridul

Reputation: 1366

I tried this and it logs slide index for me.

In HTML

<ion-slides pager="true" #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)"
    (ionSlideTransitionEnd)="slideChanged(mySlider)">
<ion-slide (click)="getSlideIndex()"> ... </ion-slide>
</ion-slides>

On your ts file

@ViewChild('mySlider', { static: true }) slider: IonSlides;

slidesDidLoad(slides: IonSlides) {
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      console.log(index);
    });
  }

  slideChanged(slides: IonSlides) {
    slides.startAutoplay();
    slides.getActiveIndex().then(index => {
      console.log(index);
    });
  }

getSlideIndex(){ //updated
this.slider.getActiveIndex().then(index => {
      console.log(index);
    });
}

Try it.

Upvotes: 1

Related Questions