jquery idangerous.swiper移动触摸滑块插件

时间 2019-11-18

标签 jquery idangerous.swiper idangerous swiper 移动触摸滑块插件栏目 JQuery 繁體版

原文原文链接

其中官网网址来自：javascript

http://www.swiper.com.cn/ 中文首页官网（最重要的说明）php

http://www.idangero.us/sliders/swiper/api.phpcss

http://www.idangero.us/sliders/swiper/index.phphtml

其中调用过的实例为：http://www.cnblogs.com/chenguiya/p/4897140.htmljava

一了解Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（若是该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。jquery

2、特征（feature)css3

一、1：1触控运动
Swiper默认提供1:1的触控距离，固然，这个比率是能够设置的。（touchRatio）git

二、触控模仿
这个功能对于开发桌面网站会颇有用。简单来讲，就是由于Swiper可以让鼠标事件表现得像触屏事件（点击以及拖曳滑块）github

三、水平/垂直
Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直运动的滑动）web

四、自由模式（Free Mode）
这种模式下可以让slides 无需定位，就像一般的滑动条。（看下面的例子）

五、旋转调整（rotation/resize）
Swiper 在移动设备旋转后能自适应尺寸。

六、响应式
能使用百分比的宽高定义slides,为移动端提供不一样的解决方案。

七、滑动阻止
简单来讲，就是，只能使用一种模式，水平或者垂直滑动。

八、抵抗反弹（resistant bounds）
Swiper可以提供一种机制，就是当滑动滑块超过最左以及最右（最上或最下）的位置时触发的一种抵御机制。

九、原生要素（native momentum）
有很多的原生东西提供给Swiper。

十、内建分页控制
Swiper可以快速生成内建的分页控制（pagination）,指定html 某一标签为pagination，Swiper就能作不少东西了。

十一、自动播放
只用设置延迟时间，Swiper就会自动地轮播slides直到你触碰该滑块（touch）为止。

十二、循环模式（Loop mode）
该种模式下，你可以无限滑动滑块，到最后一个以后会跳转回第一个。

1三、旋转模式（Carousel mode）
Swiper 可以让你在slides父容器下设置你所须要展现的slides数量。

1四、滑动容器
在该特征下可以使用Swiper在一些简单的能滑动的区域里，没有slides。在Apps里十分有用。

1五、嵌套Swipers
可以将Swipers嵌套入各类不一样的Swiper 的slide里，例如垂直的或水平的。

1六、任意的HTML 标签
能够将任一的HTML 内容放到slide里，不止仅限于图像。

1七、硬件加速
swiper 使用硬件加速技术（若是该移动设备支持的话）可以获得良好流畅的动画效果以及优美的外观，尤为是在IOS设备里。

1八、丰富的API
Swiper拥有丰富的API接口。（不过关于中文文档彷佛很少，没找着。）可以让开发者生成我的独有的分页器（pagination），上下滑块的按钮以及4个回调函数：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。

1九、灵活的配置
Swiper在初始化的时候可以接受多个参数以便让其尽量的灵活。可以配置动画的速度（speed），模式（mode水平抑或垂直的），以及自由模式（free mode）...以及其余..

20、插件API（Plugins API）
Swiper从1.7版本开始就变得强大起来了，由于有更多而简单的插件API容许开发者创造属于本身的Swiper 插件或经过Swiper的核心创制hooks(挂钩)（该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar）

2一、良好的兼容性
Swiper通用性的测试环境：移动端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌浏览器（Chrome），Safari，Firefox，IE10 以及欧朋浏览器（Opera）

2二、老版本IE的兼容
Swiper 2.x 开始，经过DOM动画，而非css transitions 兼容IE7 以上（须要包含jQuery），由于IE7不支持css3 transitions....简单来讲，支持IE7 以上版本。

2三、独立性
Swiper不依赖像jQuery那样的js类库，所以可以让Swiper更加的小型以及快速。因此Swiper可以很安全地应用诸如jQuery、zepto、jQuery Mobile，jQTouch等等其余的js类库。

2四、超轻量级
压缩后仅仅10KB左右。
以上，就是Swiper可以作的，应用以上特征就使用原生属性方法可以快速生成使人惊叹的触控接口以及apps。

3、例子

一、下载swiper最新版本https://github.com/nolimits4web/Swiper 或者百度云下载 /U体育下载资源/Swiper-master.zip

二、在HTML Head中添加Swiper's CSS and JS:

1 <head>
2   ....
3   <link rel="stylesheet" href="../dist/css/idangerous.swiper.css">
4   <script defer src="../dist/js/idangerous.swiper-2.x.min.js"></script>
5   ....
6 </head>

其中引用的文件名如下载的为准。

三、使用下面的HTML布局

<!-- 滑块主容器 -->
<div class="swiper-container">
    <!-- 其余必须的容器（必须） -->
    <div class="swiper-wrapper">
        <!-- 幻灯片-->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- 若是咱们须要分页（须要采用） -->
    <div class="swiper-pagination"></div>
    
    <!-- 若是咱们须要导航按钮（须要采用） -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 若是咱们须要滚动条（须要采用） -->
    <div class="swiper-scrollbar"></div>
</div>

四、打开下载的文件中的idangerous.swiper.css，设置Swiper's的宽度以及高度（在文件的末尾）

/* 指定swiper 容器尺寸: */

.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

五、初始化Swiper 在文档开始处，（或在窗口加载时）

1 <script type="text/javascript">
 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 </script>

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会执行屡次。

4、选项（options）

Swiper 初始化支持下列中的参数

参数	类型	默认	Example（例子）	Description（说明）
speed	number	300	600	slides滑块动画之间的持续时间（单位ms）
direction	string	horizontal	vertical	多是“水平”或“垂直”（垂直滑块）。
initialSlide	number	0	2	初始块（页面）的索引
touchEventsTarget	string	'container'		swipers事件对象，默认状态下全部的触控事件只能用于wrapper。如若须要其余元素包含在container内以及使用swipers,那么可使用'container'. 2.4.2版本新增
自动播放
autoplay	number	false		转换之间的延迟时间（毫秒）。若是未指定此参数，自动播放将被禁用
autoplayDisableOnInteraction	boolean	true		当设置为false时，用户操做以后（swipes,arrow以及pagination 点击）autoplay不会被禁掉，用户操做以后每次都会从新启动autoplay。
Freemode
freeMode	boolean	false		若是真那么幻灯片将不会有固定的位置
freeModeMomentum	boolean	true		若是属实，而后滑动就会不停地往前走了一段时间后，你释放
freeModeMomentumRatio	number	1		更高的价值产生较大的势头距离后释放滑块
freeModeMomentumBounce	boolean	true		设置为假，若是你想禁用免费模式的势头反弹
freeModeMomentumBounceRatio	number	1		更高的价值产生较大的反弹势头的影响
影响
effect	string	'slide'		多是"slide", "fade", "cube" or "coverflow"
fade	object	fade: { crossFade: false }		淡入淡出效果参数
cube	object	cube: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94 }		立方体效果参数。为了得到更好的性能，你能够禁用阴影
coverflow	object	coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true }		CoverFlow效果参数。为了得到更好的性能，你能够禁用阴影
幻灯片电网
spaceBetween	number	0		在PX幻灯片之间的距离。
slidesPerView	number or 'auto'	1		旋转模式下，设置slider's容器可以同时显示的slides数量。另外，支持'auto'值，会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式每一个视图的幻灯片的数量（在同一时间上滑动的容器滑动可见）。若是你使用它的“自动”值，并随着循环：真正的，那么你须要指定loopedSlides用幻灯片的数量参数循环（一式两份） slidesPerView：“自动”目前不具备多行模式下，兼容当slidesPerColumn > 1
slidesPerColumn	number	1		每列幻灯片的数量，对于多行布局
slidesPerColumnFill	string	'column'		多是“列”或“行”。定义幻灯片如何填补行，按列或行
slidesPerGroup	number	1		幻灯片组数字来定义和启用组滑动。实用与slidesPerView> 1使用
centeredSlides	boolean	false		若是属实，那么活动的幻灯片将集中，而不是老是在左侧。
抢光标
grabCursor	boolean	false		该选项给Swiper用户提供小小的贴心应用，值为true时，光标在Swiper上时成手掌状。
分页
pagination	string / HTMLElement	null		字符串的CSS选择器的容器分页或HTML元素
paginationClickable	boolean	false		若是真那么点击分页按钮，将致使过渡到合适的幻灯片
paginationHide	boolean	false		切换（隐藏/真）分页容器的知名度，当点击滑块的容器
paginationBulletRender(index, className)	function	null		此参数能够彻底自定义分页子弹，你须要在这里传递，接受函数的索引分页子弹数目和所需的元素类名（类名）。例如，使用此代码，咱们能够添加幻灯片编号为分页子弹： var swiper = new Swiper('.swiper-container', { //... paginationBulletRender: function (index, className) { return '<span class="' + className + '">' + (index + 1) + '</span>'; } });
导航按钮
nextButton	string / HTMLElement	null		字符串的CSS选择器或元素的HTML元素会像“下一步”按钮，点击以后就能够了
prevButton	string / HTMLElement	null		字符串的CSS选择器或元素的HTML元素，将工做像“后退”按钮，点击以后就能够了
Scollbar
scrollbar	string / HTMLElement	null		字符串的CSS选择器或容器滚动的HTML元素。
scrollbarHide	boolean	true		用户交互后自动隐藏滚动条
键盘/鼠标滚轮
keyboardControl	boolean	false		值为true时，水平模式下，能使用键盘左右方向键滑动，垂直模式下能使用上下方向键滑动
mousewheelControl	boolean	false		值为true时，可以使用鼠标滑轮滑动swiper
mousewheelControlForceToAxis	boolean	false		值为真时，鼠标轮滑会改变轴向，因此水平模式下的鼠标滑轮只做用于水平鼠标滑块，垂直的做用于垂直模式。
环
loop	boolean	false		设置为真正的使能连续循环模式若是你使用它连同slidesPerView：“auto”，那么你须要指定loopedSlides用幻灯片的数量参数循环（一式两份）
loopAdditionalSlides	number	0		幻灯片的加成数，将建立循环以后被克隆
loopedSlides	number	null		若是你使用`slidesPerView：“auto”`与循环模式，你应该告诉给Swiper 多少幻灯片应该回路（副本）使用此参数

滑块方法和属性

以后咱们初始化滑块咱们有变量（如它的初始化实例mySwiper例如可变以上）与有用的方法和属性：

性能
mySwiper.params	与经过初始化参数对象
mySwiper.container	采用滑盖容器HTML元素Dom7 / jQuery的元素。为了得到香草HTML元素使用`mySwiper.container [0]`
mySwiper.wrapper	采用滑盖包装HTML元素Dom7 / jQuery的元素。为了得到香草HTML元素使用`mySwiper.wrapper [0]`
mySwiper.slides	的幻灯片HTML元素Dom7 / jQuery的阵列状的集合。为了得到特定的幻灯片HTML元素的使用`mySwiper.slides [1]`
mySwiper.bullets	Dom7 / jQuery的集合分页按钮HTML元素。为了得到特定的幻灯片HTML元素的使用`mySwiper.bullets [1]`
mySwiper.width	宽度集装箱
mySwiper.height	容器的高度
mySwiper.translate	包装的当前值转换
mySwiper.progress	包装的目前的进辗转化（从0到1）
mySwiper.activeIndex	当前活动幻灯片的索引号注意，在循环模式活性指数值将老是错开在多个环/重复幻灯片
mySwiper.previousIndex	之前的活动幻灯片的索引号
mySwiper.isBeginning	之前的活动幻灯片的索引号
mySwiper.isBeginning	如此，若是滑块上最“左”/“顶”位置
mySwiper.isEnd	如此，若是滑块上最“正确”/“底”的位置
mySwiper.autoplaying	真正若已启用自动播放
mySwiper.animating	真要是刷卡正处于转型期
mySwiper.touches	用下面的触摸事件属性对象： mySwiper.touches.startX mySwiper.touches.startY mySwiper.touches.currentX mySwiper.touches.currentY mySwiper.touches.diff
mySwiper.clickedIndex	上次单击幻灯片的索引号
mySwiper.clickedSlide	连接到最后点击幻灯片（HTML元素）
方法：
mySwiper.slideNext(runCallbacks, speed);	运行过渡到下一个幻灯片 runCallbacks - 布尔 -将其设置为`假`（默认状况下它是`真实的`）和过渡将不会产生onSlideChange回调函数。可选速度 - 数字 -转换时间（毫秒）。可选
mySwiper.slidePrev(runCallbacks, speed);	运行过渡到前一张幻灯片 runCallbacks - 布尔 -将其设置为`假`（默认状况下它是`真实的`）和过渡将不会产生onSlideChange回调函数。可选速度 - 数字 -转换时间（毫秒）。可选
mySwiper.slideTo(index, speed, runCallbacks);	运行过渡到与指数等于'指数'参数的持续时间等于“速度”参数的幻灯片。索引 - 数字 -滑动的索引号速度 - 数字 -转换时间（毫秒）。可选 runCallbacks - 布尔 -将其设置为`假`（默认状况下它是`真实的`）和过渡将不会产生onSlideChange回调函数。可选
mySwiper.update（updateTranslate）;	此方法包括updateContainerSize，updateSlidesSize，的UpdateProgress，updatePagination和updateClasses方法你应该把它叫作后添加/手动删除幻灯片，或者你隐藏/显示后，或作任何定制修改DOM与刷卡 updateTranslate - 布尔 -将其设置为`真`（默认状况下它是`假的`），硬置位/复位/更新刷卡包装翻译。它若是使用非默认的效果或滚动条是颇有用的。可选该方法还包括能够单独使用下列方法的subcall： mySwiper.updateContainerSize（） - 从新计算刷卡容器的大小 mySwiper.updateSlidesSize（） - 从新计算幻灯片和他们的偏移数量。有用的后添加/删除幻灯片使用JavaScript mySwiper.updateProgress（） - 从新计算刷卡进步 mySwiper.updatePagination（） - 更新分页布局和从新渲染子弹 mySwiper.updateClasses（） - 最新活动/上/下一个班的幻灯片和子弹
mySwiper.onResize();	刷卡执行，当你调整浏览器的这个方法。它几乎是相同`.update（）`，但有点软，没有硬设置翻译
mySwiper.detachEvents();	卸下全部事件监听器
mySwiper.attachEvents（）;	Atach全部事件监听器再次
mySwiper.startAutoplay（）;	开始自动播放。这多是自定义的“播放”和“暂停”按钮有用
mySwiper.stopAutoplay（）;	中止自动播放。这多是自定义的“播放”和“暂停”按钮有用
mySwiper.destroy（deleteInstance，cleanupStyles）;	破坏滑块实例和分离全部事件监听器，哪里 deleteInstance - 布尔 -将其设置为`假`（默认状况下它是`真实的`），不删除刷卡实例 cleanupStyles - 布尔 -将其设置为`真`（默认状况下它是`假的`），全部的自定义样式将从幻灯片，包装和容器中取出。若是你须要摧毁刷卡，并与新的选择，或在不一样的方向再次初始化有用
mySwiper.appendSlide(slides);	添加新的幻灯片到最后。`幻灯片`能够是HTML元素或具备新的幻灯片或阵列例如幻灯片，例如HTML字符串： mySwiper.appendSlide('<div class="swiper-slide">Slide 10"</div>') mySwiper.appendSlide([ '<div class="swiper-slide">Slide 10"</div>', '<div class="swiper-slide">Slide 11"</div>' ]);
mySwiper.prependSlide(slides);	添加新的幻灯片的开始。`幻灯片`能够是HTML元素或具备新的幻灯片或阵列例如幻灯片，例如HTML字符串： mySwiper.prependSlide('<div class="swiper-slide">Slide 0"</div>') mySwiper.prependSlide([ '<div class="swiper-slide">Slide 1"</div>', '<div class="swiper-slide">Slide 2"</div>' ]);
mySwiper.removeSlide(slideIndex);	删除选定幻灯片。`slideIndex`能够是一个数与滑动索引移除或阵列的索引，例如： mySwiper.removeSlide（0）; //取出第一滑动 mySwiper.removeSlide（[ 0，1 ]）; //取出的第一和第二滑动
mySwiper.removeAllSlides（）;	删除全部幻灯片
mySwiper.setWrapperTranslate(translate);	设置自定义CSS3转换的转换价值刷卡包装
mySwiper.getWrapperTranslate（）;	获取刷卡包装CSS3电流值变换翻译
mySwiper.on(callback, handler)	添加的回调/事件处理
mySwiper.once(callback, handler)	添加将只执行一次事件/回调
mySwiper.off(callback)	删除全部处理程序指定的回调/事件
mySwiper.lockSwipeToNext（） mySwiper.unlockSwipeToNext（）	禁用（锁定）/启用（解锁）滑动到下一幻灯片的能力
mySwiper.lockSwipeToPrev（） mySwiper.unlockSwipeToPrev（）	禁用（锁定）/启用（解锁）滑动到前面的滑动能力
mySwiper.lockSwipes（） mySwiper.unlockSwipes（）	禁用（锁定）/启用（解锁）更改幻灯片的能力
mySwiper.disableMousewheelControl（）;	禁用鼠标滚轮控制
mySwiper.enableMousewheelControl（）;	启用鼠标滚轮控制
mySwiper.disableKeyboardControl（）;	禁用键盘控制
mySwiper.enableKeyboardControl（）;	使键盘控制

哈希导航(Hash Navigation)

散列导航意欲有一个连接到特定的幻灯片，容许加载页与特定的滑动打开。

为了使它工做，你须要经过传递来启用它hashnav：true参数，并添加幻灯片中的散列数据散列属性：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="slide1">Slide 1</div>
        <div class="swiper-slide" data-hash="slide2">Slide 2</div>
        <div class="swiper-slide" data-hash="slide3">Slide 3</div>
        <div class="swiper-slide" data-hash="slide4">Slide 4</div>
        <div class="swiper-slide" data-hash="slide5">Slide 5</div>
        ...
    </div>
</div>

var swiper = new Swiper('.swiper-container', {
  //enable hash navigation
  hashnav: true
})

视差(Parallax)

因为版本3.0.3刷卡支持刷卡视差过渡效果/幻灯片嵌套元素。有两种类型的视差元件的支持：

直子元素swiper-container。对于这样的元素视差效果将取决于总滑块的进展。有用的视差背景
幻灯片子元素。对于这样的元素视差效果将取决于幻灯片的进展

为了使您须要初始化与刷卡经过视差效果parallax:true参数，并添加data-swiper-parallax特性所需的元素

<div class="swiper-container">
    <!-- 视差背景元素 -->
    <div class="parallax-bg" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" data-swiper-parallax="-23%"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- 每张幻灯片具备视差的标题 -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- 视差字幕 -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- 和视差文本 -->
            <div class="text" data-swiper-parallax="-300">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>
        ...
    </div>
</div>

与指定的全部元素data-swiper-parallax属性将有视差的过渡。这个属性能够接受：

数字 -在像素值（做为标题，副标题上面的例子中），以根据进度移动元素。在这种状况下，这样的元素，将根据滑块位置在像素移动在±这个值（下一首或上）
百分比 - （做为“视差-BG”），以根据进展状况，并就其规模移动的元素。在这种状况下，根据滑动位置等元素将被移至±它的大小（宽度在水平方向和高度在垂直方向）的这一比例（下一首或上）。因此，若是元素有400像素宽度和指定数据刷卡视差=“50％”，那么它会在±200像素移动

它也能够经过使用覆盖视差方向data-swiper-parallax-x和data-swiper-parallax-y特性与相同的规则

延迟加载(Lazy Loading)

因为3.0.4版本Swiper支持图像延迟加载。

要启用延迟加载，首先咱们须要在幻灯片图像的特殊布局：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-3.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

正如你看到的：

每个懒加载的图像应该有更多的“刷卡懒”级
图片来源应该在“数据SRC”指定属性而不是“SRC”

您也能够添加动画预加载微调滑动的映像加载后自动将被删除：

<div class="swiper-lazy-preloader"></div>

或白色，一个是黑暗的布局：

<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

以后，咱们须要启用延迟加载上刷卡初始化：

var swiper = new Swiper('.swiper-container', {
     // 全部图像禁用预压
    preloadImages: false,
    // 启用延迟加载
    lazyLoading: true
});

若是你使用slidesPerView“自动”或slidesPerView> 1，那么你也应该启用watchSlidesVisibility和刷卡将在当前可见的幻灯片图像加载

Example

如下须要引用jQuery文件

1 <script src="js/jquery-1.10.1.min.js"></script>
 2 
 3 <script type="text/javascript">
 4 
 5 $(document).ready(function(){
 6 
 7   var mySwiper = $('.swiper-container').swiper({
 8 
 9     mode : 'vertical', //选择垂直模式，
10 
11     speed : 500, //设置动画持续时间500ms
12 
13     freeMode : true, //开启自由模式
14 
15     freeModeFluid : true, //开启'fluid'自由模式
16 
17     onTouchStart : function() {
18 
19       //触控滑块时执行代码
20 
21       alert('OMG you touch the slide!') 
22 
23     }
24 
25   }
26 
27 })
28 
29 </script>

Callbacks API

从Swiper2.4版本开始增长了一些回调函数，如今添加一些函数到上面。

当初始化Swiper时，旧版本指定回调函数的方式：

1 $(document).ready(function(){
 2 
 3   var mySwiper = new Swiper('.swiper-container',{
 4 
 5     mode:'vertical',
 6 
 7     speed: 600,
 8 
 9     onSlideChangeStart: function(swiper){
10 
11       alert('Hello 1');
12 
13     }
14 
15   });  
16 
17 });

新版本中可以实现无需彻底重写onSlideChangeStart参数，能够添加新函数到回调函数中。

1 mySwiper.addCallback('SlideChangeStart', function(swiper){
2 
3   alert('Hello 2');
4 
5 })

你会发觉在过渡动画开始时弹出“Hello 1” 以及“Hello 2“，该种方式下addCallback方法须要注意该回调函数名不包含”on“。

解除（fire）callback 函数语句：

mySwiper.fireCallback('SlideChangEnd',mySwiper);

移除（remove）callbacks:

mySwiper.removeCallback('SlideChangEnd');

Slides API

Swiper提供强大的Slides API，可以动态生成/删除/操做Slides（滑块）

Slide 实例

这个实例是简单的HTML元素但扩展了很是有用的方法。

下面的例子变量mySwiper包含了属性和方法的Swiper对象。

 1 <script type="text/javascript">
 2 $(document).ready(function(){
 3 　　 var mySwiper = $('.swiper-container').swiper({
 4 　　mode : 'vertical', //切换到垂直模式
 5 　　speed : 500, //动画持续时间
 6 　　freeMode : true, //启动自由模式
 7 　　freeModeFluid : true, //启动'fluid'自由模式
 8 　　onTouchStart : function() {
 9 　　//触碰滑块是的事件
10 　　alert('OMG you touch the slide!') 
11 }
12 }
13 })</script>

经过调用一下方法，你能生成Swiper滑块实例：

mySwiper.createSlide(html,slideClassList,element),其中：

html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
slideClassList(stirng[字符型],optional[可选的])- 建立类”class“属性。缺省值为"swiper-slide "
element(string[字符型],optional[可选的])-建立滑块的HTML标签，缺省值为"div"

1 var mySwiper = $(".swiper-container").swiper({...some optins...})
 2 
 3 //建立一个新的swiper实例
 4 
 5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
 6 
 7 //生成的HTML滑块："<div class="swiper-slide"><p>Here is my new slide</p></div>"
 8 
 9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10 
11 //生成的HTML滑块："<span class="swiper-slide red-slide"><p>Hello</p></span>"

"newSlide"变量包含在新建Slide实例以后,但现在还在内存中，并不在slider中。为了将其添加到slider中，可以使用一下链式方法有效地添加到Slide实例中：

newSlide.append()-添加slide到slider中的最后一个位置。返回Slide实例
newSlide.prepend()-添加slide到slider中的第一个位置。返回Slide实例
newSlide.remove()-移除slide
newSlide.getWidth()-返回slide宽度
newSlide.getHeight()-返回slide高度
newSlide.getOffset()-返回包含滑块left、top偏移量的对象
newSlide.insertAfter(index)[index-number]-插入新滑块到index索引以后。返回Slide实例
newSide.clone()-复制slide到新slide实例。返回新复制的Slide实例

1 //例子
 2 
 3 var mySwiper = $(".swiper-container").swiper({...some optins...})
 4 
 5 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
 6 
 7 newSlide.append()//newSlide添加到全部已存在的slides后面
 8 
 9 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span");
10 
11 newSlide.prepend()//-newSlide添加到全部已存在的slides的前面（第一个位置）
12 
13 //复制、插入Slide
14 
15 var clonedSlide = newSlide.clone();
16 
17 clonedSlide.append();
18 
19 //crazy 链式
20 
21 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>");
22 
23 newSlide.prepend().clone().append().clone().inertAfter(2)
24 
25 //-新建立的slide被添加到全部已存在的slide前面，而后复制slide并添加到最后，接着在复制添加到index为2的位置上

还有一些有用的方法：

slide.html(innerHTMl)[innerHTMl-string]-工做方式相似于jQuery/Zepto.html()方法。若是指定innerHTML，那么它会替代原来slide里的inner html内容，而后方法返回slide实例。

若是innerHTML没有指定，返回slide中inner html内容。

slide.index()-返回slide索引
slide.isActive()返回true若是该块是活动的
slide.setData(name,value)[name-string]-存储数据方法，可以存储全部类型变量-数组，对象，数字，字符等等
slide.getData(name)[name-string]返回存储的变量值
slide.data(name,value)[name-string,value-string]-保存变量值到data-[name]属性中
slide.data(name)[name-string]-返回data-[name]属性值

1 //例子
 2 
 3 var mySwiper = $('.swiper-container').swiper({...some options...})
 4 
 5 //建立slide实例
 6 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
 7 newSlide.append().clone().html('<p>New HTML</p>').prepend() 
 8 // 新建立的slide被添加到最后，而后复制该slide并添加html内容，最后插入到第一个位置
 9 
10 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>');
11 alert(newSlide.html()) // -> <p>Here is my new slide</p>
12 
13 Store/Get data:
14 newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad'])
15 newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad']
16 
17 newSlide.data('apple','iPad');
18 newSlide.data('apple') // ->'iPad'

Swiper Slides

好的，让咱们看看swiper是如何操做存在的slides（添加/移除）

mySwiper.slides-slides数组（slides对象）
mySwiper.appendSlide(innerHTMl,slideClassList,element)-建立新滑块并插入到slider最后面。返回slide实例：其中：

　　　　html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容

　　　　slideClassList(stirng[字符型],optional[可选的])- 建立类”class“属性。缺省值为"swiper-slide "

　　　　element(string[字符型],optional[可选的])-建立滑块的HTML标签，缺省值为"div"

mySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-插入到slider末尾。返回slide实例
mySwiper.prependSlide(innerHTMl,slideClassList,element)-新建立slide并插入到slider首位置。返回slide实例
mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-将slideInstance插入到slider首位置。返回slide实例。
mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-新建立slide并插入到slider指定的索引位置index。返回slide实例。
mySwiper.insertSlideAfter(index,slideInstance)-将slideInstance插入到slider指定的索引位置index。返回slide实例。
mySwiper.removeSlide(index)[index-numer]-移除索引为index的slide
mySwiper.removeLastSlide()-移除最后一个slide
mySwiper.removeAllSlides()-移除全部slides
mySwiper.getSlide(index)[index-number]-返回index索引的slide
mySwiper.getLastSlide()-返回最后一个slide
mySwiper.getFirstSlide()-返回第一个slide

1 //例子:
 2 
 3 //建立slide并插入
 4 mySwiper.appendSlide('Hello World')
 5 //或者:
 6 var newSlide = mySwiper.createSlide('Hello World')
 7 mySwiper.appendSlide(newSlide)
 8 //或者:
 9 mySwiper.appendSlide( mySwiper.createSlide('Hello World') )
10 
11 //复制第一个slide并插入到最后
12 mySwiper.getFirstSlide().clone().append();
13 //或者:
14 mySwiper.appendSlide( mySwiper.getSlide(0).clone() )
15 
16 //复制第二个slide修改内容并插入到最后
17 mySwiper.getSlide(1).clone().html('Hello New World!').append();
18 
19 //移除最后一个slide
20 mySwiper.removeLastSlide()
21 
22 //移除第二个slide
23 mySwiper.removeSlide(1)
24 
25 //Trick: 更换第一与第二个slide位置
26 mySwiper.getSlide(0).insertAfter(1)
27 
28 //Trick: 移动第一个slide到最后一个位置
29 mySwiper.getFirstSlide().append()
30 
31 //slide数量
32 alert(mySwiper.slides.length)
33 
34 //改变每一个slide的html
35 for (var i = 0; i < mySwiper.slides.length; i++) {
36   var slide = mySwiper.slides[i]
37   slide.html('<p> My index number is '+i+' </p>')
38 }

Important Notes
重要备注
当使用改变slides数量的方法时（例如append,prepend,remove等等），reInit()方法会被调用而后slides数量会自动从新计算。因此很是不推荐动态添加/删除slides时在"for"循环中使用"slides.length"
，由于这样作可能产生死循环。