swipe.js文檔及用法

最近的一個項目中使用到了swipe.js這個插件

感覺非常的好用的

官方網站

http://swipejs.com/

https://github.com/bradbirdsall/Swipe

簡介

swipe.js是一個輕量級的移動滑動組件，支持觸摸移動，支持響應式頁面。

下面是從GitHub上翻譯的用法和文檔

用法

 Swipe只需添加很簡單的一段代碼即可，如下

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div class='wrap'></div>
    <div class='wrap'></div>
    <div class='wrap'></div>
  </div>
</div>

以上代碼是最初需要的結構--一系列元素包裹在兩個容器中，你可以在wrap中添加任何你想要的內容。最外面的div（即slide）需要設置一下的js函數：

window.mySwipe = Swipe(document.getElementById('slider'));

同樣的，Swipe需要往樣式表中添加一些代碼

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

 

配置選項

Swipe可以擴展可選參數-通過設置對象的鍵值對:

• startSlide Integer (默認:0) - Swipe開始的索引

• speed Integer (默認:300) - 前進和后台的速度，單位毫秒.

• auto Integer - 自動滑動 (time in milliseconds between slides)

• continuous Boolean (默認:true) -是否可以循環播放（注：我設置為false好像也是循環的）

• disableScroll Boolean (默認:false) - 停止觸摸滑動

• stopPropagation Boolean (默認:false) -停止事件傳播

• callback Function - 回調函數，可以獲取到滑動中圖片的索引.

• transitionEnd Function - 在最后滑動轉化是執行.

舉例

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Swipe API

swipe擴展了幾個函數，以便於更好的通過腳本來控制滑動。

prev() 上一頁

next() 下一頁

getPos() 返回當前div（class='wrap'的div）的索引

getNumSlides() 返回滑塊總數（貌似無效）

slide(index, duration) 設置滑到的索引 (duration: 轉化的速度，單位毫秒)

 

 

實例下載

點擊這里……