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).
