I am trying to create a carousel like this and I can do this using this wrapper for swiper library (https://github.com/ksachdeva/angular2-swiper)
But is this possible to achieve my goal by using purely ionic2 and its ion-slides
components. I would prefer this over adding another, possibly, unnecessary module. Unfortunately, docs aren't clear.
swiper has been integrated directly into Ionic2... not sure what the question is here?
or you can do it this way Ionic 2 Slides Component - How to Access Swiper API
import { NavController } from 'ionic-angular/index';
import { Component, ViewChild } from "@angular/core";
@Component({
template:`
<ion-content class="has-header">
<ion-slides [options]="_options" #mySlider>
<ion-slide *ngFor="let testSlide of testSlides">
<img src="http://placehold.it/150x150">
</ion-slide>
</ion-slides>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</ion-content>
`
})
export class HomePage {
greeting: string;
testSlides: string[] = [];
@ViewChild('mySlider') mySlider: any;
constructor(private nav: NavController) {
this._options = {
slidesPerView:3,
pager: true,
nextButton: ".swiper-button-next",
prevButton: ".swiper-button-prev",
onInit:()=>{
}
}
setTimeout(()=>{
for (var i=1; i<6; i++) {
this.testSlides.push("Slide - "+i);
}
},100);
}
}
The Plunkr - http://plnkr.co/edit/ybmDsYICQopis88vDl37?p=preview
The Screenshot -
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With