How to implement swipe gestures for navigation in jQuery Mobile

Question

Can you tell me How to implement swipe gestures for navigation in jQuery Mobile?

Answer 1

To enable swipe gestures for page navigation in jQuery Mobile, use the swipeleft and swiperight events. Below is the exact implementation:

Basic Swipe Navigation

$(document).on("pagecreate", function() {

    $(document).on("swipeleft", ".ui-page", function(event) {

        var nextpage = $(this).jqmData("next");

        if (nextpage) {

            $.mobile.changePage(nextpage, { transition: "slide" });

        }

    });

    

    $(document).on("swiperight", ".ui-page", function(event) {

        var prevpage = $(this).jqmData("prev");

        if (prevpage) {

            $.mobile.changePage(prevpage, { transition: "slide", reverse: true });

        }

    });

});