swipe.js插件相关用法
来源:互联网 发布:定做软件要多少钱 编辑:程序博客网 时间:2024/05/18 09:22
官方网站
http://swipejs.com/
https://github.com/bradbirdsall/Swipe
简介
swipe.js是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面。
下面是从GitHub上翻译的用法和文档
用法
Swipe只需添加很简单的一段代码即可,如下
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div class='wrap'></div> <div class='wrap'></div> <div class='wrap'></div> </div></div>
以上代码是最初需要的结构--一系列元素包裹在两个容器中,你可以在wrap中添加任何你想要的内容。最外面的div(即slide)需要设置一下的js函数:
window.mySwipe = Swipe(document.getElementById('slider'));
同样的,Swipe需要往样式表中添加一些代码
.swipe { overflow: hidden; visibility: hidden; position: relative;}.swipe-wrap { overflow: hidden; position: relative;}.swipe-wrap > div { float:left; width:100%; position: relative;}
配置选项
Swipe可以扩展可选参数-通过设置对象的键值对:
startSlide Integer (默认:0) - Swipe开始的索引
speed Integer (默认:300) - 前进和后台的速度,单位毫秒.
auto Integer - 自动滑动 (time in milliseconds between slides)
continuous Boolean (默认:true) -是否可以循环播放(注:我设置为false好像也是循环的)
disableScroll Boolean (默认:false) - 停止触摸滑动
stopPropagation Boolean (默认:false) -停止事件传播
callback Function - 回调函数,可以获取到滑动中图片的索引.
transitionEnd Function - 在最后滑动转化是执行.
举例
window.mySwipe = new Swipe(document.getElementById('slider'), { startSlide: 2, speed: 400, auto: 3000, continuous: true, disableScroll: false, stopPropagation: false, callback: function(index, elem) {}, transitionEnd: function(index, elem) {}});
Swipe API
swipe扩展了几个函数,以便于更好的通过脚本来控制滑动。
prev()
上一页
next()
下一页
getPos()
返回当前div(class='wrap'的div)的索引
getNumSlides()
返回滑块总数(貌似无效)
slide(index, duration)
设置滑到的索引 (duration: 转化的速度,单位毫秒)
- swipe.js插件相关用法
- Swipe.js插件介绍
- Swipe JS滑动插件
- swipe js插件
- swipe js插件使用
- Swipe-移动端触摸滑动插件swipe.js
- 移动端轮播插件Swipe.js 2.0 优化
- 移动web滑动效果Swipe JS插件
- swipe.js移动端滑动插件
- Swipe JS
- 移动开发中的上下左右滑动插件jquery.swipe.js
- 初识swipe.js
- touch.js-swipe
- 常用的JS插件介绍:4、swipe.js——手势幻灯片
- 移动开发中的上下左右滑动插件jquery.swipe.js非常经典的啊!
- Appium 滑动界面swipe用法
- 使用swipe.js做幻灯片
- swipe笔记 swipe.js 轻松实现手机端滑动效果
- 有关线程互斥与同步面试题
- java jni 调用c语言函数
- Shuffle'm Up POJ
- eclipse热键
- 异常一般形式
- swipe.js插件相关用法
- 2.神经网络的监督学习
- ubuntu 16.04LTS 下Code::Blocks 16.01 安装
- 第6章gp_toolkit管理架构_gp_bloat_diag
- C++中enum与字符串或CString互相转换的方法
- java.lang.NoSuchFieldException: resourceEntries 异常解决
- Leetcode 718 Maximum Length of Repeated Subarray
- (七)windows上的git使用SSH连接
- 数据结构-图-十字链表的构造(1)