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. HDU - 2665 Kth number 主席树/可持久化权值线段树

    题意 给一个数列,一些询问,问$[l,r]$中第$K$大的元素是哪一个 题解: 写法很多,主席树是最常用的一种之一 除此之外有:划分树,莫队分块,平衡树等 主席树的定义其实挺模糊, 一般认为就是可持久 ...

  2. MySQL 索引原理相关文章

    CSDN的整理: http://bbs.csdn.net/topics/392265880 引擎在磁盘中存储顺序的图解: http://blog.csdn.net/php_lzr/article/de ...

  3. LabVIEW--为控件添加说明信息

    之前只知道为VI添加说明信息(在VI的属性里面添加,快捷键ctrl+I 打开),今天知道了控件也可以添加说明信息,这样就方便了许多,极大的提高了程序的可读性.

  4. MVC异步方法

    在mvc的开发过程中,有时候我们会需要在action中调用异步方法,这个时候会需要做一些特殊处理.我们会使用到await和async.对应的controller也应该是async的. 在MVC4中直接 ...

  5. VC++ 错误

    1.error LNK2019: unresolved external symbol _WinMain@16 referenced in function ___tmainCRTStartup解决方 ...

  6. Android获取本机号码及运营商

    import android.content.Context; import android.telephony.TelephonyManager; import android.util.Log; ...

  7. django的内置信号

    Model singnalspre_init 在model执行构造方法之前自动触发post_init django的model在执行构造方法之后,自动触发pre_save django的对象保存之前, ...

  8. C# Winform控件对透明图片重叠时导致图片不透明的解决方法(转)

    在Winform中如果将一个透明图片放在窗体上能正常显示透明,但是如果将该图片放在另一个控件上会导致不能显示透明效果. 解决这种情况,可以采取在控件上使用GDI+绘画出透明图片. 这里我们就以一个pi ...

  9. winform里面打开网页(转)

    首先,新建一个winform项目,我在想,如果想要实现打开网页功能的话,应该会有一个控件什么之类的吧?查了工具栏,真的有一个名叫 WebBrowser的家伙,应该就是这货没错了.在网上查了它的资料更加 ...

  10. oracle数据库内存调整之增加内存

    注:本文来源:小颜Kevin   <oracle数据库内存调整之增加内存> 模拟操作系统内存从2G增加为8G后,调整数据库内存参数,示例中参数不作为实际生产环境参考,因为因需所取,调整参数 ...