在页面body中插入

<div class="swiper-container temp">
<div class="swiper-wrapper">
<div class="swiper-slide"> </div>
<div class="swiper-slide"> </div>
<div class="swiper-slide"> </div>
</div>
</div

页面引入swiper.min.js,swiper.min.css文件以及jquery文件

<script type="text/javascript">
var tempSwiper = new Swiper('.swiper-container.temp', {
//initialSlide: 0,
//observer:true,
on: {
init: function(){//初始化后执行
console.log("初始化后执行-init");
},
touchStart: function(event){//当碰触到slider时执行。可选touchstart事件作为参数
console.log("================================================================================");
console.log("当碰触到slider时执行-touchStart-"+tempSwiper.activeIndex);
},
touchEnd: function(event){//触摸释放时执行,接受 touchend事件作为参数。(释放即执行)
console.log("触摸释放时执行-touchEnd-"+tempSwiper.activeIndex);
},
slideChangeTransitionStart: function(){//swiper从当前slide开始过渡到另一个slide时执行
console.log("从当前slide开始过渡到另一个slide时执行-slideChangeTransitionStart-"+tempSwiper.activeIndex);
},
slideChangeTransitionEnd: function(){//swiper从一个slide过渡到另一个slide结束时执行
console.log("从一个slide过渡到另一个slide结束时执行-slideChangeTransitionEnd-"+tempSwiper.activeIndex);
},
transitionStart: function(){//过渡开始时触发
console.log("过渡开始时触发-transitionStart-"+tempSwiper.activeIndex);
},
transitionEnd: function(swiper){//过渡结束时触发
console.log("过渡结束时触发-transitionEnd-"+tempSwiper.activeIndex);
},
reachBeginning: function(){//Swiper切换到初始化位置时执行
console.log("Swiper切换到初始化位置时执行-reachBeginning-"+tempSwiper.activeIndex);
},
reachEnd: function(){//当Swiper切换到最后一个Slide时执行
console.log("当Swiper切换到最后一个Slide时执行-reachEnd-"+tempSwiper.activeIndex);
},
slidePrevTransitionStart: function () {//滑块释放时如果触发slider向后(左、上)切换则执行
console.log("slider向后(左、上)切换则执行-slidePrevTransitionStart-"+tempSwiper.activeIndex);
},
slidePrevTransitionEnd: function(){//slider向后(左、上)切换结束时执行
console.log("slider向后(左、上)切换结束时执行-slidePrevTransitionEnd-"+tempSwiper.activeIndex);
},
slideNextTransitionStart: function () {//滑块释放时如果触发slider向前(右、下)切换则执行
console.log("slider向前(右、下)切换则执行-slideNextTransitionStart-"+tempSwiper.activeIndex);
},
slideNextTransitionEnd: function(){//slider向前(右、下)切换结束时执行
console.log("slider向前(右、下)切换结束时执行-slideNextTransitionEnd-"+tempSwiper.activeIndex);
},
fromEdge: function(){//当Swiper是从第一个或最后一个Slide切换时执行
console.log("当Swiper是从第一个或最后一个Slide切换时执行-fromEdge-"+tempSwiper.activeIndex);
},
slideChange: function(){//当当前Slide切换时执行(activeIndex发生改变)
console.log("当当前Slide切换时执行(activeIndex发生改变)-slideChange-"+tempSwiper.activeIndex);
},
},
});
</script>

测试结果:

Swiper测试的更多相关文章

  1. 7、vue-awesome-swiper页面跳转

    <template> <swiper :options='swiperOption' ref="mySwiper" class='swiper-container ...

  2. 微信小程序swiper标签的测试

    swiper属性(具体看官方文档): 一:testswiper.wxml的代码如下.testswiper.js自动生成示例代码. //testswiper.wxml <view > < ...

  3. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  4. Swiper 中文API手册(share)

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  5. Android客户端稳定性测试——Monkey

    修改时间 修改内容 修改人 2016.6.20 创建 刘永志 2016.6.29 完成 刘永志 Monkey简介: Android SDK自带的命令行测试工具,向设备发送伪随机事件流,对应用程序进行进 ...

  6. Swiper.js 中文API手册

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  7. 安卓、swiper标准的文字滚动

    溢出滚动基本原理还是relative,absolute.  核心高度  swiper-wrapper 和gun-swiper-slide 的自适应高度成为关键 <style> .gun-s ...

  8. Swiper说明&&API手册

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  9. Swiper说明及API手册说明

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

随机推荐

  1. 架构师养成记--18.NIO

    有人叫new IO 我这里就叫Non-block IO 经典概念: Buffer(缓冲区):之前直接通过流,现在提供一个buffer存放数据. Channel:管道,包括ServerSocketCha ...

  2. JS实现表格列宽拖动

    在数据表格中,有时候需要拖动表格宽度,查看完整的数据,是很常用的功能. 1 效果 可以用纯JS就可以实现,如下,是正常情况下的表格: 拖动表格标题中间线,拖动后效果如下: 查看DEMO 2 代码 HT ...

  3. 1059 C语言竞赛 (20 分)

    #include <iostream> #include <iomanip> #include <cmath> using namespace std; <& ...

  4. PyCharm+selenium环境搭建报错:Traceback (most recent call last): TypeError: 'module' object is not callable

    环境搭建好后,代码如下: from selenium import webdriverdriver = webdriver.chrome()driver.get("http://www.ba ...

  5. [Xamarin] 製作吐司(Toast)以及圖文並茂的Toast (转帖)

    最近在看Xamarin使用C#來撰寫Android App . 紀錄一下,順便給之後有需要的人可以有所參考 :) 今天要來聊的是關於Toast 這東西,這在以前Android 上面我是很常使用 拿來l ...

  6. 使用大白菜安装Windows Server 2012 r2

    依照往常安装win10的习惯操作,结果发现无GUI界面.重装时注意到了两个问题: 1. 启动时有两个U盘启动选项,请选择无UEFI的模式启动: 2. 一键安装系统时,一定要点一下系统文件来源的地方,因 ...

  7. (转)AIX的SVMON命令详解

    原文:http://czmmiao.iteye.com/blog/1153499 svmon概述 svmon 命令用于显示当前内存状态的信息,可通过 # lslpp bos.perf.tools 查看 ...

  8. 【Kafka】Kafka集群搭建

    一.准备工作 服务器:最好是多台,大于等于2 已经搭建好的zookeeper集群 下载软件kafka_2.11-0.10.0.1.tgz 二.创建目录 #创建目录 cd /opt/ mkdir kaf ...

  9. 向已有的table中插入数据

    table: <table id="seleted-table" class="table table-bordered table-hover" sty ...

  10. APU (美国AMD公司研发的加速处理器)

    APU(Accelerated Processing Unit)中文名字叫加速处理器,是AMD“融聚未来”理念的产品,它第一次将中央处理器和独显核心做在一个晶片上,它同时具有高性能处理器和最新独立显卡 ...