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="assets\js\swiper-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;
}
}
哦了~