1. 下载官方的js和css文件分别放在assets下的js和css文件夹，然后在index.html中引入
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> ... <link href="assets/css/swiper-4.1.6.min.css" rel="stylesheet"> ... </head> <body> ... <script src="assetsjsswiper-4.1.6.min.js"></script> </body> </html>
2. home.html
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> </ion-content>
3. home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare let Swiper: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {}
ionViewDidLoad() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: true
});
}
}
4. home.scss
page-home { .swiper-container { width: 600px; height: 300px; } }
哦了~