Usage

Swipe只需要按照一定的模式就好。例如：

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

以上是一個必需的結構——包含在兩個容器中的一系列元素。包含div需要像下面一樣傳送給Swipe函數：

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 整型 (default:0) - 滑動開始的索引位置

• speed 整型 (default:300) - prev和next切換的速度（毫秒）

• auto 整型 - 開始時自動切換（頁面之間切換時間）

• continuous 布爾型 (default:true) - 是否循環

• disableScroll 布爾型 (default:false) - 使滾動失效

• stopPropagation 布爾型 (default:false) - 阻止事件傳播

• callback 函數 - runs at slide change.

• transitionEnd 函數 - runs at the end slide transition.

Example

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 exposes a few functions that can be useful for script control of your slider.

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

Browser Support

Swipe is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

Who's using Swipe

• CNN
• Craigslist
• Airbnb
• NHL
• many more…

License

Copyright (c) 2013 Brad Birdsall Licensed under the The MIT License (MIT).