## 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 Shoot me a [note](mailto:brad@birdsall.co) if you want your logo here