Page Swipe

Page carousel with swipe support

by bsorrentino

HTML

<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <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>
</head> 
<body> 

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Swipe left to go to page 2.</p>        
    </div><!-- /content -->

    <div class="center-wrapper" data-role="footer" data-position="fixed" data-fullscreen="true" data-id="ftr" data-tap-toggle="false">
<div class="marginAutoLR">
<a href="#" title="Columns" class="">1</a>
<a href="#" title="Flower" class="">2</a>
<a href="#" title="Olive tree" class="ws_selbull">3</a>
<a href="#" title="Panorama" class="">4</a>
<a href="#" title="Sea view" class="">5</a>
<a href="#" title="Amazing view" class="">6</a>    
        </div>        
    </div>    

</div><!-- /page -->
    
<div data-role="page" id="page2">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>Swipe right to go to page 1.</p>        
    </div><!-- /content -->

</div><!-- /page -->    

</body>

CSS

.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}

JavaScript

$("#page1").on("swipeleft", function(e){
    $.mobile.changePage("#page2", {transition: "slide"});
});
    
$("#page2").on("swiperight", function(e){
    $.mobile.changePage("#page1", {transition: "slide",
                                   reverse: true});
});