Hello swipe

swipe is a accurate touch slider for mordern browser.

Try a demo. or Run tests.

Usage

Dom structure:

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

Js to init a swipe:

var swipe = new Swipe(document.getElementById('mySwipe'));

Some suggested init css example:

#mySwipe {
  width: 100%;
  margin: 0 auto;
}

.swipe-wrap {
  width: 9999999px;
  height: 185px;
  overflow: hidden;
}

.swipe-wrap div {
  text-align: center;
  float: left;
  width: 100%;
}

.swipe-wrap div img {
  max-width: 100%;
}

.swipe-nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.swipe-nav-item {
  width: 10px;
  height: 10px;
  display: inline-block;
  background: white;
  border-radius: 50%;
  margin-left: 10px;
}

.swipe-nav-item-on {
  background: red;
}

Config Options

Swipe can take an optional second parameter– an object of key/value settings:

• speed Integer (default:300) - sliding speed

• threshould Integer (default:160) - touch effect threshould.

• auto Integer (default:2000, set 0 to turn off) - begin with auto slideshow (time in milliseconds between slides)

• nav Boolean (default:true) - if or not show nav

Example

var swipe = new Swipe(document.getElementById('mySwipe'), {
  speed: 400,
  auto: 3000,
  threshould: 100,
  nav: false
});

Swipe API

Swipe exposes a few functions that can be useful for script control of your slider.

prev(callback, queue) slide to prev (callback: callback after transition finishes, queque: if or not to put in transition queque)

next(callback, queue) slide to next (callback: callback after transition finishes, queque: if or not to put in transition queque)

getIndex(queue) returns current slide index (queque: true to get the last index in queue)

getLength() returns the total amount of slides

slideTo(index, callback, direction, queue) slide to index (index: target index, callback: callback after transition finishes, direction: 'left' or 'right', queque: if or not to put in transition queque,)

Browser Support

Swipe is now compatible with all morden webkit browsers

Who's using Swipe

Shoot me a note if you want your logo here

License

Copyright (c) 2015 lyz Licensed under the The MIT License (MIT).