Question

I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.

Answer 1

I like SwipeJS, it’s lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).

There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).

You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:

$(document).delegate('#page-two', 'swipeleft', function () {
    //next page
    $.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
    //prev page
    $.mobile.changePage($('#page-one'), { reverse : true });
});

Here is a demo: http://jsfiddle.net/fFGvD/

Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.