Swipe JS – 移動WEB頁面內容觸摸滑動類庫

在以前給你們分享過一款移動端的內容滑塊插件《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等等。

1、Swiper的特色

下面就爲你們介紹下該插件的特色：

一、1:1 觸控運動
Swiper默認爲1:1的觸控距離，比率能夠自定義。

二、觸控模擬
能讓鼠標也支持觸摸滑動效果，能夠在PC端也能滑動起來，也就是支持在電腦端鼠標滑動。

三、水平或垂直
有兩種運動模式，horizontal(水平滑動)以及vertical（垂直滑動）。

四、自由模式
可以讓slides無需定位，就像一般的滑動條。（能夠在演示地址體驗）

五、旋轉調整
Swiper 在移動設備旋轉後能夠自適應尺寸，能夠自動根據設備旋轉和縮放。

六、響應式佈局
slides的高度使用百分比來設置，從而解決不一樣移動端的適配。

七、滑動阻止
會自動限制一種模式，水平或者垂直。

八、滑塊反彈
反彈機制，當滑塊到達最左或者最右（最上或者最下）的位置時，會觸發回彈效果。

九、原生動態
使用原生的轉換效果，html5動畫屬性。

十、內置分頁控制
能自動生成分頁控制機制，能夠指定控制器的標籤pagination。

十一、自動播放
Swiper能夠設置自動播放，以及自動播放的延遲時間。

十二、循環模式
能夠自由設置開啓和關閉，開啓後，可以無限的播放幻燈片，到了最後一個位置時，會切換回第一個（無縫切換）。

1三、旋轉模式
可以讓你在slides父容器下設置你所須要展現的slides數量來旋轉播放。

1四、滾動容器
該功能能夠在容器裏面滾動內容（不是指幻燈片，而是幻燈片裏面的內容滾動），特別適用於APP的開發效果。

1五、嵌套幻燈片
可以將swiper嵌套入各類不一樣的Swiper的slide裏面，例如第一個slide裏面能夠放在一個水平的，而第二個slide裏面能夠放置垂直的。

1六、放置HTML標籤
該幻燈片插件，不僅是容許放置圖片標籤，並且能夠放置任意的HTML標籤，例如文本、視頻等等。

1七、硬件加速
swiper可使用設備硬件加速技術，能大幅度的改善動畫效果以及優美的流暢性，特別是在IOS系統裏面表現的更加完美（硬件加速須要設備支持）。

1八、豐富的API接口
swiper擁有着很是豐富的api接口，例如：onTouchStart、onTouchMove、onTouchEnd、onSlideSwitc、autoplay等等。

1九、靈活的配置
Swiper在初始化的時候可以接受多個參數，能夠很是靈活的配置插件的效果。

20、插件API
Swiper從1.7版本開始就變的更增強大，由於有更多而簡單的插件API容許開發者創造屬於本身的Swiper 插件或經過Swiper的核心創制hooks(掛鉤)（該官網處提供了幾款優秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar）。

2一、良好的兼容性
Swiper通用性的測試環境：移動端的Safari（iOS5下），Android 2.1+，windows Phone 8,以及最新版本的谷歌瀏覽器（Chrome），Safari，Firefox，IE10 以及歐朋瀏覽器（Opera）。

2二、對IE的兼容
可以兼容IE7以上的版本，在IE7中使用的DOM動畫，而非css transitions切換，因此須要引入jQuery。

2三、獨立性
Swiper不依賴像jQuery那樣的js類庫，這樣子Swiper會更加的小型以及快速，從而使用不一樣的手機設備環境。但Swiper也能很安全地應用諸如jQuery、jQuery Mobile，jQTouch等等其餘的js類庫。

2四、超輕量級
壓縮後僅僅10KB左右，獨立運行，不依靠第三方類庫。

看完以後是否是感受很激動？基本上此插件能夠完成大部分的移動滑塊的需求了。

2、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