Swipenav

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 = 80)
• 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)
• enableSwipe determines whether swipe is enabled or not, plugin can still be used for positioning and animating (default = true)
• maxLeft the maxiumum pixels an item can be swiped left beyond its size to reveal what is below (default = false)
• maxRight the maxiumum pixels an item can be swiped right beyond its size to reveal what is below (default = false)

methods

• swipeto allows an item to be animated to a location using a button or event other than swiping
• unswipe detach the swipe functionality from the element
• resetswipe moves the layer to the starting position

Example

//this would be an expected setup to reveal nav under a page. The body would be set to be swipable and would allow 250px to be revealed  under the body for navigation.

$(document).ready(function() {
	$('.body').addSwipe(function() {}, function() {}, {
		snapGrid: 1,
		keepWithin: false,
		maxLeft: 250,
		maxRight: 0
	});
	
	// Triggering the 'swipeto' method
	$('button').on('click', function() {
		$('.body').trigger('swipeto', [left, 250]);
	});
	
	// Triggering the 'resetswipe' method
	$('button_1').on('click', function() {
		$('.body').trigger('resetswipe');
	});
});

Requirements

jQuery 1.7 or higher

License

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

Based On

AddSwipe Plugin by Molnar Laszlo