移动端触摸滑动插件Swiper

一、了解Swiper

目前移动端项目一般都需要具有触屏焦点图的效果，如果你也需要实现这一功能的话，Swiper是一个不错的选择。

1、他不需要加载任何公共库（如jQuery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的动行，如jQuery，Zepto，jQuery Moblie等。

2、Swiper默认的触摸比例为1:1，你可以通过修改Swiper的设置来改变这个比例。

3、Swiper 增加了选项可以开启 Mutation Observer,有了这个功能Swiper可以在你动态改变Dom或Swiper的样式时自动重新初始化并计算所需的元素。

4、Swiper拥有丰富的API，他允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果。

5、Swiper是唯一一个支持100%RTL布局的滑动插件。

6、Swiper允许多行Slides布局，这样每行的slide就会较少。

7、增加了三种新的过渡效果：淡入、3D方块、3D流。

8、现在Swiper可以用来控制其他的Swiper，甚至可以同时控制。

9、Swiper带有所有常用的导航控制器，包括分页器，切换箭头，滚动条。

10、Swiper使用流行的flexbox布局，这样就解决了很多计算尺寸方面的问题。这种布局也允许用CSS来设定Slides。

11、你可以在Swiper初始化的时候设定slide的显示，包括每行、每列、每组数量以及他们的间距等。

12、Swiper支持流行的视差滚动效果，这种效果可以应用在Swiper里任一元素上，图片、文本块、标题、背景等等。

13、Swiper懒加载延迟了不活动/不可见的图片加载，用户滑动时才加载他们。这一特性可以使页面加载更快并可提高Swiper的性能。

14、Swiper3还包含了所有swiper2的牛逼功能，包括自适应、滚动反弹、抵抗反弹、loop模式、嵌套Swiper。

二、使用方法

1.首先加载插件，Swiper准备了基础测试包供你使用，测试包里面已经包含了swiper.min.js和swiper.min.css文件。

…

…

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

…

…

2.HTML内容。

Slide 1

Slide 2

Slide 3

3.你可能想要给Swiper定义一个大小。

.swiper-container {

width: 600px;

height: 300px;}

4.初始化Swiper：最好是挨着标签

var mySwiper = new Swiper (‘.swiper-container’, {

direction: ’vertical’,

loop: true,

// 如果需要分页器

pagination: ’.swiper-pagination’,

// 如果需要前进后退按钮

nextButton: ’.swiper-button-next’,

prevButton: ’.swiper-button-prev’,

// 如果需要滚动条

scrollbar: ’.swiper-scrollbar’,

})

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

window.onload = function() {

…

}

或者这样（Jquery和Zepto）

$(document).ready(function () {

…

})

三、API

Parameter Type Default Description initialSlide number 0 初始slide的索引 direction string ‘horizontal’ 可以是’horizontal’或’vertical’(垂直滑动) speed number 300 滑动速度(单位ms) setWrapperSize boolean false 开启这个设定会在Wrapper上添加等于slides相加的宽高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。 virtualTranslate boolean false 虚拟位移。当你启用这个参数，Swiper除了不会移动外其他的都像平时一样运行，仅仅是不会在Wrapper上设置位移。当你想自定义一些slide切换效果时可以用。 比如我们提供的cube切换效果，当slide切换时，Wrapper的位置是固定的。 Autoplay(自动切换) autoplay number - 自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。 autoplayDisableOnInteraction boolean true 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 Progress(进度) watchSlidesProgress boolean false 开启这个参数来计算每个slide的progress(进展) watchSlidesVisibility boolean false 必须先开启watchSlidesProgress 开启了watchSlidesVisibility，则会在每个可见slide增加一个classname Freemode(free模式) freeMode boolean false 设置为true时，将开启free模式，即滑动停止后停在当前位置，而不是当前帧的位置。 freeModeMomentum boolean true 设置为true时，滑动释放slide后仍会靠动量继续滑动，为false时，释放后立即停止。 freeModeMomentumRatio number 1 设置的值越大，当释放slide时的滑动距离越大。 freeModeMomentumBounce boolean true false时禁用free模式下的动量反弹，slides通过惯性滑动到边缘时，无法反弹。 freeModeMomentumBounceRatio number 1 值越大产生的边界反弹效果越明显，反弹距离越大。 Effects(切换效果) effect string ‘slide’ 可设置为”slide”（位移切换）”fade”（淡入）”cube”（方块）”coverflow”（3d流）。 fade object fade: { crossFade: false} fade效果参数 cube object cube: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94} cube效果参数 coverflow object coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true} coverflow效果参数 Parallax(视差效果) parallax boolean false 开启视差效果 Slides grid(网格分布) spaceBetween number 0 slide之间的距离（单位px） slidesPerView number or ‘auto’ 1 设置slider容器能够同时显示的slides数量(carousel模式)。 slidesPerColumn number 1 多行布局里面每列的slide数量。 slidesPerColumnFill string ‘column’ 多行布局中以什么形式填充’cloumn’和’row’ slidesPerGroup number 1 在carousel mode下定义slides的数量多少为一组。 centeredSlides boolean false 设定为true时，活动块会居中，而不是默认状态下的居左。 Grab Cursor(抓手光标) grabCursor boolean false 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状 Touches(触发) touchRatio number 1 触摸距离与slide滑动距离的比率。 touchAngle number 45 允许触发拖动的角度值 simulateTouch boolean true 默认为true，Swiper接受鼠标点击、拖动 shortSwipes boolean true 设置为false时，进行快速短距离的拖动无法触发Swiper。 longSwipes boolean true 设置为false时，进行长时间长距离的拖动无法触发Swiper。 longSwipesRatio number 0.5 进行longSwipes时触发swiper所需要的最小拖动距离比例，值越大触发Swiper所需距离越大。最大值0.5。 longSwipesMs number 300 定义longSwipes的时间（单位ms），超过则属于longSwipes。 followFinger boolean true 如设置为false，拖动slide时它不会动，当你释放时slide才会切换。 onlyExternal boolean false 值为true时，slide无法拖动，只能使用扩展API函数来改变slides滑动。 threshold number 0 拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。 touchMoveStopPropagation boolean true true时阻止touchmove冒泡事件。 Touch Resistance(触摸阻力) resistance boolean true 值为false时将slide拖出边缘时完全没有抗力 resistanceRatio number 0.85 抵抗率。resistant bounds（抵抗反弹）抵抗力的大小比例。值越小抵抗越大越难将slide拖出边缘。 Clicks(点击) preventClicks boolean true 默认为true，当swiping时阻止意外的