JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<div data-role="page" id="zero">
<div data-role="header">
<h1>Page Zero</h1>
</div>
<div data-role="content">
<p>Swipe Left to go to next page.</p>
</div>
</div>
<div data-role="page" id="one">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<p>Swipe Left to go to next page.</p>
<p>Swipe Right to go to previous page.</p>
</div>
</div>
<div data-role="page" id="two">
<div data-role="header">
<h1>Page Two</h1>
</div>
<div data-role="content">
<p>Swipe Right to go to previous page.</p>
</div>
</div>
JavaScript
$(document).delegate('.ui-page', "swipeleft", function(){
var $nextPage = $(this).next('[data-role="page"]');
// swipe using id of next page if exists
if ($nextPage.length > 0) {
$.mobile.changePage('#' + $nextPage[0].id, { transition: 'slide' });
}
}).delegate('.ui-page', "swiperight", function(){
var $prevPage = $(this).prev('[data-role="page"]');
// swipe using id of next page if exists
if ($prevPage .length > 0) {
$.mobile.changePage('#' + $prevPage[0].id, { transition: 'slide', reverse : true });
}
});