在ionic2中集成swiper插件

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;

  }

}

哦了~

巴特西

在ionic2中集成swiper插件

最新文章

热门文章