来源

属性:

swiper.slides.length

1、onInit(swiper): function(){...}

swiper初始化完成,会调回调  onInit 方法 获取当前swiper索引值

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
//Swiper初始化了
//alert(swiper.activeIndex);提示Swiper的当前索引
}
})
</script>

当设置属性值

initialSlide: 1
 //alert(swiper.activeIndex);提示Swiper的当前索引 为: 1

通过设置该属性,指定当前swiperSlide位置

2、onTouchStart \ onTouchMove \ onTouchEnd 

监听当前slide滑动状态

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTouchStart: function(swiper,even){
alert('事件触发了;');
}
})
</script>

3、onSlideChangeStart 、 onSlideChangeEnd

回调函数,swiper从当前slide开始过渡到另一个slide时执行。触摸情况下,如果释放slide时没有达到过渡条件而回弹时不会触发这个函数,此时可用onTransitionStart
可接受swiper实例作为参数,输出的activeIndex是过渡后的slide索引。

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onSlideChangeStart: function(swiper){
alert(swiper.activeIndex);
}
})
</script>

4、onImagesReady

回调函数,所有内置图像加载完成后执行,同时“updateOnImagesReady”需设置为“true’。

内置标签内使用 img

5、onTransitionStart \ onTransitionEnd

回调函数,过渡开始时触发,接受Swiper实例作为参数。

Swiper运作原理
Swiper常用运作方式有两种:手动触摸切换或者导航切换(前进后退按钮,键盘控制,分页器,内置方法slideTo等)
1. 手动触摸切换拖动阶段Swiper根据手势位置实时设定wrapper的位移(onSetTranslate),释放拖动时Swiper会设定一次wrapper自由过渡(onSetTranslate、onSetTransition、onTransitionStart、onSlideChangeStart)。速度为speed直到过渡结束(onTransitionEnd、onSlideChangeEnd)。
2. 导航切换可参考手动触摸释放阶段

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onTransitionStart: function(swiper){
...
}
})
</script>

6、onClick \ onTap \ onDoubleTap (swiper, event): function(){...}

7、onReachBeginning \ onReachEnd (swiper): function(){...}

8、onDestroy(swiper): function(){...}

<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
onDestroy: function(swiper){
alert('你销毁了Swiper;');
}
})
$('#btn1').click(function(){
mySwiper.destroy(false);
})
</script>

设为false则不销毁Swiper对象,默认为true。

9、onAutoplay \ onAutoplayStart \ onAutoplayTop

10、onLazyImageLoad \ onLazyImageReady

11、onSlideNextStart  \ onSlideNextEnd 下滑触发(开始及结束)

12、onSlidePrevStart  \ onSlidePrevEnd 上滑动(开始及结束时触发)

13、onScroll:function(swiper){...}            需要设置 mousewheelControl : true

14、onKeyPress  在允许键盘控制状态下,按键盘时会触发这个函数。  keyboardControl:true

15、onBeforeResize  \  onAfterResize  回调函数:当swiper跟随windows变化尺寸前后触发。

swiper控件(回调函数)的更多相关文章

  1. nj04---事件回调函数

    一.回调函数 1.异步式读取文件 var fs=require('fs'); fs.readFile('file.txt','utf-8',function(err,data){ if(err){ c ...

  2. WPF 分页控件的实现 -用户控件

    效果图:

  3. 2016.1.19 DEV Express控件GirdControl使用

    103.GridControl中添加Button RunDesigner,添加一列,设置对应字段FiledName,ColumnEdit选择ButtonEdit,此时默认风格像下拉框,需调整属性: 在 ...

  4. cocos2dx基础篇(9) 滑块控件CCControlSlider

    [3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)CCControlEvent 改为强枚举 Control::EventType (4)CCControlEvent ...

  5. MFC 设置控件事件对应的函数

    在项目中,右击你想设置的控件,打开属性. 然后找到:控件事件,如果在Visual Studio 2015中操作,显示如图: 然后,以设定单击事件为例: 点击右边的三角,选择 <Edit Code ...

  6. 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版

    <zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...

  7. 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表

    <zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...

  8. emwin之错误使用控件函数导致死机现象

    @2018-10-15 导致死机的代码示例如下 /** * @brief widget ID define * @{ */ #define ID_WINDOW_0 (GUI_ID_USER + 0x0 ...

  9. vs2010开发activex(MFC)控件/ie插件(三),js调用ocx控件的接口函数

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280   js调用ocx控件的接口函数,先看demo效果:      简单测试过程 ...

随机推荐

  1. WDCP文件缓存问题

    WDCP文件缓存问题,新建index.php 输入代码 <?php echo '789'; ?> 显示789 修改代码 <?php echo '666'; ?> 显示789 访 ...

  2. p2197 nim游戏

    传送门 分析 我们知道最后取完的情况就是所有的a[i]异或和为0 所以只要开始的异或和不为0则先手一定可以将它转化为0 否则不行 所以如果异或和非0则先手胜 代码 #include<bits/s ...

  3. Excel打开图片

    =HYPERLINK("D:\固定资产图片\"&C2&".jpg",C2)

  4. (树)判断二叉树是否为BST

    题目:判断一颗二叉树是否为BST. 思路:其实这个问题可以有多个解决方法. 方法一:递归解决.根据BST的特性.左边的小于根节点的值,右边的大于根节点的值.并且对于每一棵子树都是如此.所以我们可以直接 ...

  5. 多线程学习-基础(一)Thread和Runnable实现多线程

    很久没记录一些技术学习过程了,这周周五的时候偶尔打开“博客园”,忽然让我产生一种重拾记录学习过程的想法,记录下学习研究过程的一点一滴,我相信,慢慢地就进步了!最近想学习一下多线程高并发,但是多线程在实 ...

  6. const 在C++中的区别

    一.Const作用    如下表所示: No. 作用 说明 参考代码 1 可以定义const常量 const int Max = 100; 2 便于进行类型检查 const常量有数据类型,而宏常量没有 ...

  7. jQuery 插件开发——GridData(表格)

    导读:我个人认为做开发最幸福的事之一就是设计一套属于自己的控件,老早之前就想去做这样的事情,一直碍于事件的冲突和个人的想法,最终没有定论,最近难得抽出一些空隙,去完成这件事情.其实自定义控件并不是难事 ...

  8. C#与数据库访问技术总结(三)之 Connection对象的常用方法

    说明:前面(一)(二)总结了数据库连接的概念以及连接数据库的字符串中的各个参数的含义.这篇随笔介绍connection对象的常用方法. Connection对象的常用方法 Connection类型的对 ...

  9. Python之‘数据结构’

    简介 数据结构基本上就是--它们是可以处理一些数据的结构.或者说,它们是用来存储一组相关数据的.在Python里面有三种内建的数据结构--列表.元组和字典. 一.列表 list是处理一组有序项目的数据 ...

  10. CI框架定义判断POST GET AJAX

    CI框架当中并没有提供,类似tp框架中IS_POST,IS_AJAX,IS_GET的方法. 所有就得我们自己造轮子了.下面就介绍一下,如何定义这些判断请求的方法.其实很简单的. 首先打开constan ...