Jump to an specific slide with ion-slides component

Hey there!

I’m trying to jump to an specific slide using ion-slides component in Ionic 2.

Do you have any idea about how to do that?


Hi there! Someone asked the same thing in the public slack this morning. Here’s what I have

import {Page} from 'ionic-angular';
  template: `
  <ion-navbar *navbar>
  <ion-title>Tab 1</ion-title>
    <button (click)="next(slides, 2)">next</button>
<ion-content padding class="page1">
  <ion-slides [options]="options" #slides>
      <img src="http://cache.marriott.com/propertyimages/p/phldt/phototour/phldt_phototour68.jpg?Log=1" alt="">
      <img src="https://newevolutiondesigns.com/images/freebies/philadelphia-downtown.jpg" alt="">
      <img src="http://www.sailtraining.org/events/conference/images/SheratonPhiladelphiaSocietyHillHotelLobby.jpg" alt="">
export class Page1 {
  constructor() { }
  next(slide, index) {
    slide.slider.slideTo(index, 2000)

Thanks, it worked!

I searched in slack earlier but didn’t find.

Best regards,
Pablo Souza


With ionic 3.12.1, I have to change:

next(slide, index) {
slide.slider.slideTo(index, 2000)


next(slide, index) {
slide._slides.slideTo(index, 2000)

I try with @ViewChild like explain in documentation but without success: https://ionicframework.com/docs/api/components/slides/Slides/

the best solution i have found is to use initialSlide parameter in the HTML file like this.

<ion-slides initialSlide=‘2’ >

1 Like