Ionic 2 Slides Component - How to Access Swiper API
14,064
Solution 1
You can pass a function within the options property.
@Component({
selector: 'my-component',
template: '<ion-slides [options]="options">
<ion-slide>Slide1</ion-slide>
<ion-slide>Slide2</ion-slide>
</ion-slides>',
directive: [IONIC_DIRECTIVES]
})
export class MyComponent {
public slider: any;
constructor() {
this.options = {
onlyExternal: false,
onInit: (slides: any) =>
this.slider = slides
}
}
click() {
this.slider.sliderNext(true, 250);
}
}
For further options have a look at the swiper api.
Solution 2
If you are looking for a simple solution without custom directives, you can try this
constructor(
private _app: IonicApp
){}
ngAfterViewInit() {
this._slider = this._app.getComponent('my-slider');
}
goToSlide(slideIndex){
this.slider.slider.slideTo(slideIndex);
}
Author by
Steve Harbick
Updated on July 25, 2022Comments
-
Steve Harbick almost 2 years
Using ion-slides component (4 slides) on app welcome page/slides. I need ability for user to skip to last slide. Docs say ion-slides implementation of Swiper API. I need to access methods like:
mySwiper.slideTo(index, speed, runCallbacks);
Tips on how to implement?
-
Steve Harbick about 8 yearsWith this approach, does that mean I'll need to install Swiper library independent of Ionic 2 Slides implementation?