如何使用Swiper库在Ionic2中创建幻灯片/转盘

用户名

我正在尝试创建这样的旋转木马，我可以使用此包装器来使用swiper库（https://github.com/ksachdeva/angular2-swiper）

但这有可能通过使用纯ionic2及其ion-slides组件来实现我的目标。与添加另一个可能不必要的模块相比，我更愿意这样做。不幸的是，文档尚不清楚。

亚伦·桑德斯（Aaron Saunders）

swiper已直接集成到Ionic2中...不知道这里的问题是什么？

或者您可以通过这种方式来实现Ionic 2幻灯片组件-如何访问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

屏幕截图-