Lightweight Mobile Slider - Swipe

File Size: 7.89 KB
Views Total: 7167
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Lightweight Mobile Slider - Swipe

Swipe is a lightweight mobile slider with 1-to-1 touch movement that brings content sliding to the mobile web to preserve space and allow for new types of interaction. 

Related Plugins:

How to use it:

1. Include Swipe.js in your page

<script src='swipe.js'></script>

2. Markup

<div id='slider'>
  <ul>
    <li style='display:block'></li>
    <li style='display:none'></li>
    <li style='display:none'></li>
    <li style='display:none'></li>
    <li style='display:none'></li>
  </ul>
</div>

3. Call the Function

window.mySwipe = new Swipe(document.getElementById('slider'));

4. Advanced Options

window.mySwipe = new Swipe(document.getElementById('slider'), {
    startSlide: 2, // Index position Swipe should start at (default:0)
    speed: 400, // Speed of prev and next transitions in milliseconds. (default:300)
    auto: 3000, // Begin with auto slideshow (time in milliseconds between slides)
    callback: function(event, index, elem) {

      // Runs at the end of any slide change. (effective for updating position indicators/counters)

    }
});

Change Log:

v2.0.0 (2013-03-25)

  • fix continuous for no-transitions browsers

This awesome jQuery plugin is developed by thebird. For more Advanced Usages, please check the demo page or visit the official website.