在之前給大家分享過一款移動端的內容滑塊插件《Swipe JS – 移動WEB頁面內容觸摸滑動類庫》，但該插件存在幾個缺點，導致使用起來有點困難。很多同學都來問覺唯，該怎么解決呢？那么覺唯就為大家解決這個問題，解決方案是使用另外一個功能極其強大的插件：Swiper – Mobile touch slider and framework with hardware accelerated transitions。按照覺唯慣例，demo先送上，一共有19個演示效果，大家可以前往體驗。
Swiper是由iDangero.us開發的一款免費移動端觸摸滑塊幻燈片插件，不但能夠適用於各種操作系統的手機，還能夠利用HTML5的硬件加速功能來完成滑塊的切換效果，其效果以及實用性非常強。該插件原主要適用於iOS的設計，但也適用於Android、Windows Phone和最新的桌面瀏覽器，當然也可以使用在APP上，如微信、QQ等等。
一、Swiper的特點
下面就為大家介紹下該插件的特點：
1、1:1 觸控運動
Swiper默認為1:1的觸控距離，比率可以自定義。
2、觸控模擬
能讓鼠標也支持觸摸滑動效果，可以在PC端也能滑動起來，也就是支持在電腦端鼠標滑動。
3、水平或垂直
有兩種運動模式，horizontal(水平滑動)以及vertical（垂直滑動）。
4、自由模式
能夠讓slides無需定位，就像通常的滑動條。（可以在演示地址體驗）
5、旋轉調整
Swiper 在移動設備旋轉后可以自適應尺寸，可以自動根據設備旋轉和縮放。
6、響應式布局
slides的高度使用百分比來設置，從而解決不同移動端的適配。
7、滑動阻止
會自動限制一種模式，水平或者垂直。
8、滑塊反彈
反彈機制，當滑塊到達最左或者最右（最上或者最下）的位置時，會觸發回彈效果。
9、原生動態
使用原生的轉換效果，html5動畫屬性。
10、內置分頁控制
能自動生成分頁控制機制，可以指定控制器的標簽pagination。
11、自動播放
Swiper可以設置自動播放，以及自動播放的延遲時間。
12、循環模式
可以自由設置開啟和關閉，開啟后，能夠無限的播放幻燈片，到了最后一個位置時，會切換回第一個（無縫切換）。
13、旋轉模式
能夠讓你在slides父容器下設置你所需要展示的slides數量來旋轉播放。
14、滾動容器
該功能可以在容器里面滾動內容（不是指幻燈片，而是幻燈片里面的內容滾動），特別適用於APP的開發效果。
15、嵌套幻燈片
能夠將swiper嵌套入各種不同的Swiper的slide里面，例如第一個slide里面可以放在一個水平的，而第二個slide里面可以放置垂直的。
16、放置HTML標簽
該幻燈片插件，不只是允許放置圖片標簽，而且可以放置任意的HTML標簽，例如文本、視頻等等。
17、硬件加速
swiper可以使用設備硬件加速技術，能大幅度的改善動畫效果以及優美的流暢性，特別是在IOS系統里面表現的更加完美（硬件加速需要設備支持）。
18、豐富的API接口
swiper擁有着非常豐富的api接口，例如：onTouchStart、onTouchMove、onTouchEnd、onSlideSwitc、autoplay等等。
19、靈活的配置
Swiper在初始化的時候能夠接受多個參數，可以非常靈活的配置插件的效果。
20、插件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的兼容
能夠兼容IE7以上的版本，在IE7中使用的DOM動畫，而非css transitions切換，所以需要引入jQuery。
23、獨立性
Swiper不依賴像jQuery那樣的js類庫，這樣子Swiper會更加的小型以及快速，從而使用不同的手機設備環境。但Swiper也能很安全地應用諸如jQuery、jQuery Mobile，jQTouch等等其他的js類庫。
24、超輕量級
壓縮后僅僅10KB左右，獨立運行，不依靠第三方類庫。
看完之后是不是感覺很激動？基本上此插件可以完成大部分的移動滑塊的需求了。
二、Swiper的使用
那么接下來就跟大家說下簡單的用法，首先引入核心文件js，以及自帶的默認css樣式表：
<link rel="stylesheet" href="../dist/idangerous.swiper.css" rel="external nofollow" > <script defer src="../dist/idangerous.swiper.min.js"></script>
HTML結構以及插件初始化配置：
<div class="device">
<a class="arrow-left" href="#" rel="external nofollow" rel="external nofollow" ></a>
<a class="arrow-right" href="#" rel="external nofollow" rel="external nofollow" ></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img src="http://static.jiawin.com/uploads/2015/01/05142321afe81f00b1a4495.png"> </div>
<div class="swiper-slide"> <img src="http://static.jiawin.com/uploads/2015/01/05142321afe81f00b1a4495.png"> </div>
<div class="swiper-slide">
<div class="content-slide">
<p class="title">Slide with HTML</p>
<p>在這里放置任意html，例如html文本、視頻。</p>
<p><a href="http://www.jiawin.com/">覺唯網</a>，推崇以用戶為中心的設計理念，致力於為設計愛好者提供一個良好的學習交流平台。</p>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
插件初始化配置：
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
通過上面的代碼輸出，就可以使用這個插件了。操作使用起來還是挺方便的，代碼也不會很復雜。
關於這個插件的更多API使用方法以及參數，大家可以前往官網查詢：http://www.idangero.us/sliders/swiper/api.php。
原文：http://www.jiawin.com/swipe-mobile-touch-slider