A Zepto Plugin for iOS like swipe navigation.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitignore
README.markdown
swipeslide.css
swipeslide.js

README.markdown

SwipeSlide

A Zepto Plugin for iOS like swipe navigation.

<iframe style="border: 0; margin: 0; padding: 0;" src="https://www.gittip.com/max-power/widget.html" width="48pt" height="22pt"></iframe>

Usage

<div id="container">
  <ul>
    <li style="background: #f00;">1</li>
    <li style="background: #0f0;">2</li>
    <li style="background: #00f;">3</li>
  </ul>
</div>


<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript" src="swipeslide.js"></script>
<link rel="stylesheet" href="swipeslide.css">
<script type="text/javascript">
  $(document).ready(function() {
    $('#container').swipeSlide();
  }
</script>

Options

You may pass some options to the swipeSlide function:

{
  first: 0,                     // number of first slide to show
  vertical: false,              // horizontal or vertical
  tolerance:0.3,                // values between 0 and 1, where 1 means you have to drag to the center of the slide
  delay: 0.3,                   // animation speed in seconds
  threeD: false,                // 3D Carousel instead of linear slider
  visibleSlides: 1,             // number of slides visible at the same time
  useTranslate3d: true,         // will use translateX or translateY if set to false
  bulletNavigation: 'link',     // false, true or 'link' (event handlers will be attached)
  directionalNavigation: false, // will inset previous and next links
  onChange: function() { ... }  // after slide transition callback
}