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

其中官网网址来自：

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

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

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

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

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

二、特征（feature)

1、1：1触控运动
   Swiper默认提供1:1的触控距离，当然，这个比率是可以设置的。（touchRatio）

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

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

4、自由模式（Free Mode）
   这种模式下能够让slides 无需定位，就像通常的滑动条。（看下面的例子）

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

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

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

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

9、原生要素（native momentum）
   有不少的原生东西提供给Swiper。

10、内建分页控制
    Swiper能够快速生成内建的分页控制（pagination）,指定html 某一标签为pagination，Swiper就能做很多东西了。

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

12、循环模式（Loop mode）
    该种模式下，你能够无限滑动滑块，到最后一个之后会跳转回第一个。

13、旋转模式（Carousel mode）
    Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。

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

15、嵌套Swipers
    能够将Swipers嵌套入各种不同的Swiper 的slide里，例如垂直的或水平的。

16、任意的HTML 标签
    可以将任一的HTML 内容放到slide里，不止仅限于图像。

17、硬件加速
    swiper 使用硬件加速技术（如果该移动设备支持的话）能够得到良好流畅的动画效果以及优美的外观，尤其是在IOS设备里。

18、丰富的API
    Swiper拥有丰富的API接口。（不过关于中文文档似乎不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮以及4个回调函数：onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。

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

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

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

22、老版本IE的兼容
    Swiper 2.x 开始，通过DOM动画，而非css transitions 兼容IE7 以上（需要包含jQuery），因为IE7不支持css3 transitions....简单来说，支持IE7 以上版本。

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

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

三、例子

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

2、在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>

 

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

3、使用下面的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>

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

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

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

5、初始化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会执行多次。

四、选项（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"
，因为这样做可能产生死循环。
posted @ 2015-04-09 10:56  chenguiya  阅读(1019)  评论(0)    收藏  举报