Page navigation using touch gestures on mobile devices
CSS HTML JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build First release Oct 26, 2012
demo new GA tracker Mar 9, 2015
src new GA tracker Mar 9, 2015 new GA tracker Mar 9, 2015
build.xml First release Oct 26, 2012
package.json new GA tracker Mar 9, 2015

Swipe Page Navigation

Provides touch gesture control to navigate site pages

Usually we hide all auxiliary page components on mobile to save space of the viewing area. So we have to provide in return alternative navigation tool out of the screen. Since keyboard with navigation keys isn't available, we can use touch gestures.

This script enables "swipe left/right" navigation on your site. It looks for sibling page links in the page head section () and when found responds on swipe gesture to redirect on the requested page. When user starts the gesture (swiping) the script displays an arrow on the screen edge. But it gives more than that:

  • It warns user about the captured gesture.
  • It shows direction of swiping (prev/next).
  • User can cancel the gesture, moving finger back to the initial position before finishing the gesture.

Usage and API

  1. Add to the pages you want available for swipe the navigation siblings links:
        <link rel="prev" title="Page 2" href="page2.html" />
        <link rel="next" title="Page 1" href="page1.html" />
  1. Now it's enough to include the script and its css:
    <link rel="stylesheet" type="text/css" href="../src/assets/spn.css" />
    <script type="text/javascript" src="../src/js/spn.js"></script>