移动端开发（四）：swiper.js

swiper.js中文网：http://www.swiper.com.cn/

 

文档结构

 

swiper.jquery.js    是须要引用jquery.js 或者 zepto.js 时，只需直接引用该文件便可，减小加载。

swiper.animate.js  使用animate.js的动画效果，使用方法：http://www.swiper.com.cn/usage/animate/index.html

 

基本使用方法

具体操做：http://www.swiper.com.cn/usage/index.html

1. 写基本html标签结构，结构中使用swiper.js的className；

2.书写js时，可直接调用某功能，可是前提必须是具备该功能的html标签存在在页面中；

3.使用swiper.js的样式，需应用swiper.css

 

API swiper.js版本3.0+  

具体API:http://www.swiper.com.cn/api/start/2014/1218/140.html

 1.初始化

var mySwiper = new Swiper('.swiper-contain',{
   autoplay: 3000, // 自动滑动 
})

 

2. Basic （swiper通常选项）

主要包含：初始设置，滑动方向，速度，自动播放，视差效果，隐藏显示时的尺寸应用等。

 

3. Progress （进度）

标识silde的索引

 

4. Free Mode（free模式/抵抗反弹）

是否实现自动贴合，贴合期间的各个效果

 

5. Slide grid（网格分布）

 

 

properties 属性