Jump to an specific slide with ion-slides component

Ionic Framework ionic-v3
1

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?

Thanks!

2

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

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

Thanks, it worked!

I searched in slack earlier but didn’t find.

Best regards,
Pablo Souza

5

https://books.google.co.ma/books?id=3K7HDgAAQBAJ&pg=PA209&lpg=PA209&dq=slideNext(speed,+runCallbacks)+ionic2&source=bl&ots=UtTRvmtK_h&sig=LxMiuVhfbRCNkAbab4JFlgaDkxU&hl=fr&sa=X&redir_esc=y#v=onepage&q&f=false

7

With ionic 3.12.1, I have to change:

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

to

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/

8

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

<ion-slides initialSlide=‘2’ >

1 Like