jQuery Mobile Left/Right Swipe to Next Page

in Technical

I just launched my first mobile site/app at nycomedylist.com using jQuery Mobile, a fantastic, easy-to-use framework that gave me a ton of power and options out of the box.

[Since this post was originally written, the project has moved to WordPress, away from jQuery Mobile, but the information below remains accurate.]

Developing the various “pages” in the site was a cinch. The whole site loads as a single page, and each “page” inside it is a simple div—jQuery Mobile simply loads whichever “page” you need, using simple CSS3 transitions to switch views. Couldn’t be more lovely, and it works great on a bunch of devices.


On the initial version of the site, when users went to one of the inner “pages”, the site would force them to click a HOME button to switch back to the home page before switching forward to another page. This was no good.

I searched for a way to make swiping possible, and quickly found a solution that gave me 95% of what I needed. It allowed me to swipe back and forth through all the site’s “pages”, except for…

A Small UX Problem

Swiping left (to go forward) worked as expected: the new content slid in from the right, which made sense. However, swiping right (to go backward) was problematic: the correct content slid into position, but also from the right, which didn’t make sense.

The Solution

jQuery solutions like this, written by experienced nerds, are not always clear to me; they assume a level of jQuery and JavaScript proficiency I don’t have. I wish there was better commenting.

But after a little fiddling around, I came up with the following which works perfectly, sliding in the content from the correct direction. You can now swipe through all pages of the site, back and forth, and the left/right transitions work sensibly.

$('div.ui-page').live("swipeleft", function(){
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
$('div.ui-page').live("swiperight", function(){
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {transition: "slide",
reverse: true}, true, true);
// -->

The above code goes in the <head> of your page. Hope it works well for you.

Minimum Requirements: jQuery 1.6.4 & jQuery Mobile 1.0

Comments and feedback welcome.

16 Responses to “jQuery Mobile Left/Right Swipe to Next Page”

  1. Jackie

    I just wanted to say after many days of pulling my hair out, your code was exact thing i was looking for! it works great. Thank you, thank you!!!

  2. Sean

    That’s great. Glad I could help.

    N.B. Unrelated to the above, but a comment about the swipe function in general: I may actually take it off that NYCOMEDYLIST.COM site because some users, myself included, find it a bit trigger-happy—it’s very easy to inadvertently swipe to another page when you didn’t mean to, which is annoying, and annoying is not good.

  3. Tom

    Beautiful !! Great simplification on right and left Thanks

    Any way to add swipe up and down, page to page?

  4. Scott

    Well done…simply works.

  5. smayton

    You do have a problem here:
    When you swipe to a particular day, say Monday, and you scroll down, at some point it just slides back to the previous page. Unexpected.

  6. Sean

    I think that’s a problem with the sensitivity of the jQuery Mobile script. It’s annoying and is one of the reasons I’m moving away from using it; I’m moving that particular site to a basic WordPress theme.

  7. web designer

    A family member linked me to this site. Thanks for the details.

  8. Clayton Lloyd

    This is also a good alternative as it gives you control to only specify an area of the page you wish to use to swipe over.


    Just one thing to remember is that to ensure your page id are whatever they should be in the code, in this example they are device[XX]

  9. Raul

    EXCELLENT!!! you are a genius!! thanks mas !!

  10. Jim

    How would this work if you want to link to external html pages, so you have page1.html to page5.html how would this work when data-rel=”external” ?

  11. Sean O'Dwyer

    I’m not a mobile expert but maybe reading http://jquerymobile.com/test/docs/pages/page-links.html would set you on the right path. Seems like you CAN actually get it to play nicely with multiple separate pages, via Ajax.

  12. Chris

    Do you have a simple demo page you could share. This will help contextualize how the code works (as you haven’t posted all of it) and how the gestures work.


  13. Justin

    Many thanks for this simple code. 😉


Leave a Reply