Usage:
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper's CSS and JS:
1
2 ....
3
4
5 ....
6
其中引用的文件名以下载的为准。
3、使用下面的HTML布局
1
2
3
4
7
8
11
12
15
16
17
4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾)
/* 指定swiper 容器尺寸: */
.swiper-container, .swiper-slide {width:500px;height:200px;
}
5、初始化Swiper 在文档开始处,(或在窗口加载时)
1
2 /*======
3 使用文档添加事件或窗口加载事件
4 例如:
5 window.onload = function() { ...代码 ...}
6 或者document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false)
7 =======*/
8 window.onload = function() {
9 var mySwiper = new Swiper('.swiper-container',{
10 //添加需要的选项:
11 mode:'horizontal',
12 loop: true
13 //等等..
14 });
15 }
16 })
17
API:
new Swiper(container,options)
container: 字符串要求,Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;
options:-对象,可选择的。Swiper参数,详情见下:
用法:
1 var mySwiper = new Swiper(".swiper-container",{
2 speed:750,
3 mode:"vertical"
4 })
返回拥有众多有用函数(functions)以及方法(methods)的对象:
·mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮(mousewheel control)控制
·mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮
·mySwiper.enableKeyboardControl()-滑动中键盘控制可用
·mySwiper.disableKeyboardControl()-禁用滑动中键盘控制
·mySwiper.swipeNext()-执行过渡动画到下一滑块(slide)(简单来说就是滑动到下一个页面)
·mySwiper.swipePrev()-执行过渡动画到上一滑块
·mySwiper.swipeTo(index,speed,runCallbacks) - 执行过渡到索引下标数字等于传入参数“index”的页面(slide)处,速度为传入的参数“speed”。同时可将“runCallbacks”设置为false(默认为“true”),那么transition(过渡)不会产生onSlideChange回调函数。
·mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10
·mySwiper.browser.is8 -返回 “true”如果浏览器为IE8
·mySwiper.support.touch -返回 “true”如果浏览器支持触屏
·mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形)
·mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形)
·mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡)
·mySwiper.activeSlide() - 返回当前活动块(slide)(slide 实例,HTML元素)
·mySwiper.clickedSlideIndex - 返回触控/点击块(slide)的索引(数字)。只适用于“onSlideTouch”和“onSlideClick”
回调函数中。
·mySwiper.clickedSlide - 返回触控/点击块(slide)(slide实例,HTML元素)。只适于“onSlideTouch”和“onSlideClick”
回调函数中。
·mySwiper.activeIndex- 返回当前活动块的索引(number)
·mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引(number)
·mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引(number)
·mySwiper.previousIndex- 返回上一个活动块的索引(number)
·mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮
·mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮
·mySwiper.destroy(removeResizeEvent) -移除所有绑定的事件监听(窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】,容器(wrapper)的触控事件,以及文档的鼠标事件),对于添加/移除滑块,页面到文档时非常有用,能够释放浏览器内存。
·mySwiper.resizeFix()-调用这个方法当你改变swiper's 的尺寸而没有改变窗口大小时。
·mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。
·mySwiper.width 返回Swiper容器的宽度
·mySwiper.height返回Swiper容器的高度
·mySwiper.isTouched 返回布尔值,当触控该slide时返回“true”
·mySwiper.positions - 返回包含x,y坐标的wrapper对象
·mySwiper.touches - 返回包含触控信息的对象数组
·mySwiper.params - 获取对象初始化参数,能够在初始化之后改变/重写该参数,如:
mySwiper.params.speed = 500;
·mySwiper.getWrapperTranslate(axis)-返回当前容器“位移(translate)"【css3 transform ->translate】,即x,或y轴的偏移量。”axis“-参数为字符串”x“或”y“,对应于水平模式及垂直模式。
·mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform's translate 的值。x,y and z -为数字
·mySwiper.wrapperTransitionEnd(callback,permanent) - 使用该方法当Swiper ”transitionEnd“事件触发后能够自定义回调函数(在swipeNext,swipePrev,swipeTo 以及swipeReset 函数之后):
callback-函数(function)。默认状态下(如果permanent 值为false)transitions只执行一次
permanent - boolean . 默认状态下为false,当设置为真时该回调函数callback会执行多次。
选项(options)
Swiper 初始化 支持下列中的参数
Parameter(参数)
Type(类型)
Default Value(默认值
Example(例子)
Description(说明)
speed
number
300
600
slides滑块动画之间的持续时间(单位ms)
eventTarget
string
'wrapper'
'container'
swipers事件对象,默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用'container'. 2.4.2版本新增
autoplay
number
5000
-
过渡延迟时间(单位ms),参数没有指定的情况下,不生效,(补充:当用户操作