Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thebird/Swipe
Swipe is the most accurate touch slider.
https://github.com/thebird/Swipe
Last synced: 9 days ago
JSON representation
Swipe is the most accurate touch slider.
- Host: GitHub
- URL: https://github.com/thebird/Swipe
- Owner: thebird
- License: mit
- Created: 2011-04-28T17:57:25.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2020-05-12T17:10:27.000Z (over 4 years ago)
- Last Synced: 2024-10-10T15:29:34.469Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 1.73 MB
- Stars: 6,793
- Watchers: 314
- Forks: 1,689
- Open Issues: 245
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Usage
Swipe only needs to follow a simple pattern. Here is an example:
``` html
```
Above is the initial required structure– a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so:
``` js
window.mySwipe = Swipe(document.getElementById('slider'));
```
I always place this at the bottom of the page, externally, to verify the page is ready.
Also Swipe needs just a few styles added to your stylesheet:
``` css
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
```
## Config Options
Swipe can take an optional second parameter– an object of key/value settings:
- **startSlide** Integer *(default:0)* - index position Swipe should start at
- **speed** Integer *(default:300)* - speed of prev and next transitions in milliseconds.
- **auto** Integer - begin with auto slideshow (time in milliseconds between slides)
- **continuous** Boolean *(default:true)* - create an infinite feel with no endpoints
- **disableScroll** Boolean *(default:false)* - stop any touches on this container from scrolling the page
- **stopPropagation** Boolean *(default:false)* - stop event propagation
- **callback** Function - runs at slide change.
- **transitionEnd** Function - runs at the end slide transition.
### Example
``` js
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)](http://opensource.org/licenses/MIT).