Swiper.js使用教程

官網地址：(http://www.swiper.com.cn/)。

1、Swiper.js簡介：

Swiper(前稱Swiper master) 是一款免費以及輕量級的移動設備觸控滑塊的js框架，使用硬件加速過渡（若是該設備支持的話）。主要使用與移動端的網站、網頁應用程序（web apps），以及原生的應用程序（native apps）。主要是爲IOS而設計的，同時，在Android、WP8系統以及PC端的瀏覽器也有着良好的用戶體驗。

Swiper經常使用於移動端網站的內容觸摸滑動

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。

Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果。

Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

更多的介紹能夠去官網地址：http://www.swiper.com.cn/查看。

也能夠戳這裏查看demo：http://www.swiper.com.cn/demo/index.html#

2、Swiper.js的版本區別

一、Swiper.js 3.x的版本。其主要適用對象爲手機、app、webapp等移動終端。Swiper.js 3.0版本所採用了比較多的html5與CSS3的新特性，所以對PC端的瀏覽器兼容性並非很是好，尤爲是IE。在IE9如下（IE10沒有測試過），Swiper.js 幾乎等同於沒有用，一點效果都沒有。所以Swiper.js 3.0最適合用於移動端。

二、Swiper.js 2.x版本。Swiper.js 2.x版本對PC端的瀏覽器兼容性比較好，甚至支持IE7。其中的滑動效果在IE8均可以完美的運行。

具體看demo：http://swiper2.swiper.com.cn/demo/index.html

3、Swiper.js 有趣的功能

一、使用過程當中，以爲Swiper.js能整合強大的css3動畫效果插件：animate.css，詳情請戳：http://daneden.github.io/animate.css/。Swiper.js結合Animate.css能夠實現強大的動畫效果，幾乎無所不能。若是Animate.css的動畫效果你不滿意，你徹底能夠本身添加動畫，用起來簡直太棒了。

關於Animate.css的詳細教程已經有人寫得很是詳細了，這裏也就不累贅重複寫了，直接轉載地址：

css3動畫簡介以及動畫庫animate.css的使用