AddSwipe plugin

With this plugin you can add swipe action to a layer, and render actions for the left and right swipe move gesture. Works with mouse and touchscreen uniformly. You can also set it up to snap to grid, e.g. window width or a fraction of the width.

Syntax

$(layer).addSwipe( leftFn, rightFn, { options } );

  • leftFn the function to be called on left swipe event
  • rightFn the function to be called on right swipe event
options
  • minDist minimum distance in pixels that is to be treated as swipe (default = 40)
  • snapGrid the grid to snap, 1 means snap to whole width, 2: half width (default = 0, no snap)
  • keepWithin the content is not allowed go off the window (default = true)
methods
  • unswipe detach the swipe functionality from the element
  • resetswipe moves the layer to the starting position

Example

sample.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>addSwipe plugin sample</title> <style> body { margin:0; padding:0; font:12px/1.231 Arial,Helvetica,sans-serif; background-color:#BCB4AE; text-align:center; } #wrap { position:relative; margin:10px auto; width:90%; height:200px; overflow:hidden; } #content { position:absolute; left:0; top:0; width:500%; background-color:#fe9; } ul { width:100%; margin:0; padding:0; white-space:nowrap; list-style-type:none; } ul li { float:left; display:inline-block; width:20%; height:200px; line-height:200px; font-size:5em; color:#fff; } li:nth-child(1) { background-color:#69a; } li:nth-child(2) { background-color:#c94; } li:nth-child(3) { background-color:#596; } li:nth-child(4) { background-color:#a96; } li:nth-child(5) { background-color:#469; } </style> </head> <body> <div id="wrap"> <div id="content"> <ul> <li>First</li><li>Second</li><li>Third</li><li>Fourth</li><li>Fifth</li> </ul> <div style="clear:both;"></div> </div> </div> <h3>Swipe me!</h3> <button>Reset</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script> <script src="addswipe.js"></script> <script> $(document).ready(function() { $('#content').addSwipe(function() { $('h3').text("Swiped left!"); }, function() { $('h3').text("Swiped right!"); }, { snapGrid: 1, }); $('button').click(function() { $('#content').trigger('resetswipe'); }); }); </script> </body> </html>

Requirements

jQuery 1.7 or higher

License

Available for use in all personal or commercial projects under both MIT and GPL licenses.

Copyright (c) 2012 Laszlo Molnar

Leave a Reply