angular – 如何使用swiper库在Ionic2中创建幻灯片/轮播

发布时间：2020-12-17 10:23:51 所属栏目：安全来源：网络整理

导读：我正在尝试创建一个像这个的旋转木马,我可以使用这个swiper库包装器( https://github.com/ksachdeva/angular2-swiper) 但这是否有可能通过使用purely ionic2及其离子载玻片组件来实现我的目标.我更喜欢这个,而不是添加另一个可能不必要的模块.不幸的是,文档

我正在尝试创建一个像这个的旋转木马,我可以使用这个swiper库包装器( https://github.com/ksachdeva/angular2-swiper)

但这是否有可能通过使用purely ionic2及其离子载玻片组件来实现我的目标.我更喜欢这个,而不是添加另一个可能不必要的模块.不幸的是,文档不清楚.

swiper已直接集成到Ionic2中…不确定这里的问题是什么？

或者你可以这样做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);

    }
}

Plunkr – http://plnkr.co/edit/ybmDsYICQopis88vDl37?p=preview

截图 –

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!