1. 下载官方的js和css文件分别放在assets下的js和css文件夹，然后在index.html中引入

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3.  
  4. <head>
  5.   ...
  6.   <link href="assets/css/swiper-4.1.6.min.css" rel="stylesheet">
  7.   ...
  8. </head>
  9.  
  10. <body>
  11.   ...
  12.   <script src="assets\js\swiper-4.1.6.min.js"></script>
  13. </body>
  14.  
  15. </html>

2. home.html

  1. <ion-header>
  2.   <ion-navbar>
  3.     <ion-title>
  4.       Ionic Blank
  5.     </ion-title>
  6.   </ion-navbar>
  7. </ion-header>
  8.  
  9. <ion-content padding>
  10.   <div class="swiper-container">
  11.     <div class="swiper-wrapper">
  12.       <div class="swiper-slide">Slide 1</div>
  13.       <div class="swiper-slide">Slide 2</div>
  14.       <div class="swiper-slide">Slide 3</div>
  15.     </div>
  16.   </div>
  17. </ion-content>

3. home.ts

  1. import { Component } from '@angular/core';
  2. import { NavController } from 'ionic-angular';
  3. declare let Swiper: any;
  4.  
  5. @Component({
  6.   selector: 'page-home',
  7.   templateUrl: 'home.html'
  8. })
  9. export class HomePage {
  10.   constructor(public navCtrl: NavController) {}
  11.  
  12.   ionViewDidLoad() {
  13.     var mySwiper = new Swiper('.swiper-container', {
  14.       direction: 'vertical',
  15.       loop: true
  16.     });
  17.   }
  18. }

4. home.scss

  1. page-home {
  2.   .swiper-container {
  3.     width: 600px;
  4.     height: 300px;
  5.   }
  6. }

哦了~

在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. IEnumerable和IEnumerator使用

    IEnumerable接口是非常的简单,只包含一个抽象的方法GetEnumerator(),它返回一个可用于循环访问集合的IEnumerator对象. IEnumerator是一个真正的集合访问器,没 ...

  2. xshell访问内网虚拟机

    1 关闭虚拟机防火墙 chkconfig iptables off 2 查看VMware Network Adapter VMnet8的ip地址 3 虚拟机nat中设置端口转发,抓发至虚拟机内Linu ...

  3. ubuntu 安装 库文件

    ubuntu 16.4 安装freeradius 时,缺少库文件  libtalloc, 使用命令: sudo apt-get install  libtalloc 发现找不到库文件 libtallo ...

  4. Zeppelin0.7.2结合hive解释器进行报表展示

    前提:服务器已经安装好了hadoop_client端即hadoop的环境hbase,hive等相关组件 1.环境和变量配置①拷贝hive的配置文件hive-site.xml到zeppelin-0.7. ...

  5. linux ln 命令使用参数详解(ln -s 软链接)

    ln是linux中一个非常重要的命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下都放一个必须相同的文件,我们只要在 ...

  6. 【原创】大数据基础之Hive（5）hive on spark

    hive 2.3.4 on spark 2.4.0 Hive on Spark provides Hive with the ability to utilize Apache Spark as it ...

  7. MinGW-w64非官方编译器集成安装包（很清楚）

    官方链接[编辑] MinGW 官方网站. SourceForge.net上的MinGW官方的下载站点(Win32系统). MinGW-w64官方的下载站点[编辑] MinGW-w64是2005年由On ...

  8. 自然语言处理之LCS最长公共子子序列

    #!一个序列S任意删除若干个字符得到的新序列T,则T叫做S的子序列 注意,这个和最长公共字串不一样,最长公共子串要求连续. 1.算法公式: def lcs(a,b): lena = len(a) le ...

  9. Ajax中onreadystatechange函数不执行，是因为放在open()后

    今天动手写Ajax时遇到的问题:按照下面的顺序来写Ajax,功能是alert出txt文档的内容,在Chrome下可以执行onreadystatechange中的事件,在IE11及以下.FF就不能执行o ...

  10. spark submit参数及调优

    park submit参数介绍 你可以通过spark-submit --help或者spark-shell --help来查看这些参数.   使用格式:  ./bin/spark-submit \   ...