How to create a filmstrip / carousel in Ionic2 using the swiper library

I'm trying to create a carousel carousel and I can do this using this shell for the swiper library ( https://github.com/ksachdeva/angular2-swiper )

But is it possible to achieve my goal using purely ion2 and its ion-slides components. I would prefer this by adding another, possibly unnecessary module. Unfortunately, the documents are not clear.

+5
source share
1 answer

swiper was integrated directly into Ionic2 ... not sure if the question is here?

or you can do it this way Ionic 2 Slides Component - How to access the 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

Screenshot - enter image description here

+3
source

All Articles