ionic slide on click go to some slide

Question

I used ionic 4 slide.

 <ion-slides pager="false">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides, 5)">
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 4</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 5</h1>
      </ion-slide>
    </ion-slides>

in the ts file i have used following code.

next(slide, index) {
this.slides.slideTo(index)
}

click event is working good. After click the slide is stopped. I found this fix from the following location.

https://forum.ionicframework.com/t/jump-to-an-specific-slide-with-ion-slides-component/48840/5

How can i fix this issue??

Answer 1

Think your missing the template reference variable #slides

 <ion-slides pager="false" #slides >
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide (click)="next(slides , 4)">
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 4</h1>
      </ion-slide>
 <ion-slide>
        <h1>Slide 5</h1>
      </ion-slide>
    </ion-slides>

and .ts

next(slide, index) {
    slide.slideTo(index)
}

2nd way

cmd (in project) -

npm i @ionic/angular

.html-

  <ion-slides pager="false">
          <ion-slide>
            <h1>Slide 1</h1>
          </ion-slide>
          <ion-slide (click)="next(4)">
            <h1>Slide 2</h1>
          </ion-slide>
          <ion-slide>
            <h1>Slide 3</h1>
          </ion-slide>
     <ion-slide>
            <h1>Slide 4</h1>
          </ion-slide>
     <ion-slide>
            <h1>Slide 5</h1>
          </ion-slide>
        </ion-slides>

.ts -

import {IonSlides} from '@ionic/angular';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
      @ViewChild(IonSlides) slides: IonSlides;


next( index) {
    this.slides.slideTo(index)
}
}