移動端開發（四）：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 屬性