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插件的更多相关文章

  1. Ionic2中集成腾讯Bugly之自定义插件

    Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...

  2. Ionic2中集成第三方控件Sweetalert

    Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...

  3. Jenkins中集成jmeter-maven插件

    转自:http://my.oschina.net/u/1377774/blog/168969 目录[-] 第一步.先在maven工程中单独使用jmeter-maven插件 0.环境 1.在POM.xm ...

  4. Ionic2中使用第三方插件极光推送

    不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...

  5. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  6. 实战：vue项目中导入swiper插件

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4.常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: n ...

  7. IDEA中集成JRebel插件

    下载下面2个插件 jr-ide-intellij-6.4.3_13-16.zip --- 官网的jar(地址:https://plugins.jetbrains.com/plugin/4441-jre ...

  8. 在rubymine中集成heroku插件

    先安装heroku,参见http://www.cnblogs.com/jecyhw/p/4906990.html Heroku安装之后,就自动安装上git,目录为C:\Program Files (x ...

  9. Eclipse中集成Perforce插件

    perforce插件是由perforce官方提供的,安装时需要依赖DLTK,如下: 第一步:打开你的Eclipse,然后 Help -> Install New Software ... -&g ...

随机推荐

  1. Sublime Text 3安装Package Control快速建立html5和xhtml文档

    Sublime Text 3安装Package Control快速建立html5和xhtml文档 先关闭Sublime text 3:第1步:下载sublime_package_control-mas ...

  2. Git系列①之仓库管理互联网托管平台github.com的使用

    互联网项目托管平台github.com的使用 1.安装git客户端 # yum install -y git 配置git全局用户以及邮箱 [root@web01 ~]# git config --gl ...

  3. OpenStack实践系列⑤网络服务Neutron

    OpenStack实践系列⑤网络服务Neutron 3.8 Neturn 服务部署 注册neutron服务 [root@node1 ~]# source admin-openrc.sh [root@n ...

  4. [转载]RabbitMQ消息可靠性分析

    有很多人问过我这么一类问题:RabbitMQ如何确保消息可靠?很多时候,笔者的回答都是:说来话长的事情何来长话短说.的确,要确保消息可靠不只是单单几句就能够叙述明白的,包括Kafka也是如此.可靠并不 ...

  5. hadoop生态系统主要架构图汇总

    1 hadoop1.0时期架构 2 hadoop2.0时期架构 3 hdfs架构 [Active Namenode]:主 Master(只有一个),管理 HDFS 的名称空间,管理数据块映射信息:配置 ...

  6. 硬盘性能测试工具fio

    如何衡量云硬盘的性能 IOPS:每秒读/写次数,单位为次(计数).存储设备的底层驱动类型决定了不同的 IOPS. 吞吐量:每秒的读写数据量,单位为MB/s. 时延:IO操作的发送时间到接收确认所经过的 ...

  7. oracle 11g完全彻底的卸载

    1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: <找注册表 :开始->运行->regedit>  HKEY ...

  8. 《JavaWeb从入门到精通》（明日科技，清华大学出版社）

    <JavaWeb从入门到精通>(明日科技,清华大学出版社)

  9. Confluence 6 禁用管理员联系表单

    如果你希望禁用这个功能,不允许用户通过发送电子邮件的方式联系站点管理员.你可以禁用这个页面中有关输入用户信息发送电子邮件的部分.你只能禁用用户电子邮件输入表单,如果你按照上面描述的步骤在 'Custo ...

  10. Java的课后作业——18.10.18

    日期:2018.10.18 星期四 博客期:020 小试验任务: 我就发一下代码好了!!! package test1; import java.util.Scanner; public class ...