I have 4 pages and I can swipe between them smoothly. But when I swipe right on the first which doesn't have a page before that or on the last page which doesn't have a page after that, then my swipe stops. It doesn't event go to the next or previous page anymore.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2
/jquery.mobile-1.3.2.min.css" />
</head>
<body>
<div data-role="page" id="home">
HOME
</div>
<div data-role="page" id="about">
ABOUT
</div>
<div data-role="page" id="portfolio">
PORTFOLIO
</div>
<div data-role="page" id="contact">
CONTACT
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-
1.3.2.min.js">
</script>
<script>
$(document).on('swipeleft swiperight', function (event) {
if (event.type == 'swipeleft') {
var nextPage = $.mobile.activePage.next('[data-role=page]');
if (nextPage) {
$.mobile.changePage(nextPage, {
transition: "slide"
});
}
}
if (event.type == 'swiperight') {
var prevPage = $.mobile.activePage.prev('[data-role=page]');
if (prevPage) {
$.mobile.changePage(prevPage, {
transition: "slide",
reverse: true
});
}
}
});
</script>
</body>
</html>
The problem is that your vars prevPage and nextPage aren't undefined
You may either check some page property like in
or add custom attributes like "data-first" and "data-last" to your first and last page and check them in your code like in
See Fiddle