swper_Swiper 中文API手册（share）

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

5

6

7

8

9

10

11

12

13

14

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)，参数没有指定的情况下，不生效，(补充：当用户操作