how to create swipe to open webpage(URL)

How can i build swipeview in website Like this http://ift.tt/2h2bQY7

But i need swipe in website. with nav buttons on bottom and/or side arrows

How can i build?

Swipe to open webpage url.

I tried.

HTML CODE.

<div data-role="page" id="city" class="demo-page" data-dom-cache="true" data-theme="b" data-prev="prevCity" data-next="nextCity" data-url="city">
    <div role="main" class="ui-content">
        <div id="trivia-city" class="trivia ui-content" data-role="popup" data-position-to="window" data-tolerance="50,30,30,30" data-theme="a">
            <a href="#" data-rel="back" class="ui-btn ui-btn-right ui-btn-b ui-btn-icon-notext ui-icon-delete ui-corner-all">Close</a>
            <p>Here some text.</p>
        </div><!-- /popup -->
    </div><!-- /content -->
</div>

JS CODE.

// Pagecreate will fire for each of the pages in this demo
// but we only need to bind once so we use "one()"
$( document ).one( "pagecreate", ".demo-page", function() {
    // Initialize the external persistent header and footer
    $( "#header" ).toolbar({ theme: "b" });
    $( "#footer" ).toolbar({ theme: "b" });
    // Handler for navigating to the next page
    function navnext( next ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
            transition: "slide"
        });
    }
    // Handler for navigating to the previous page
    function navprev( prev ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
            transition: "slide",
            reverse: true
        });
    }
    // Navigate to the next page on swipeleft
    $( document ).on( "swipeleft", ".ui-page", function( event ) {
        // Get the filename of the next page. We stored that in the data-next
        // attribute in the original markup.
        var next = $( this ).jqmData( "next" );
        // Check if there is a next page and
        // swipes may also happen when the user highlights text, so ignore those.
        // We're only interested in swipes on the page.
        if ( next && ( event.target === $( this )[ 0 ] ) ) {
            navnext( next );
        }
    });
    // Navigate to the next page when the "next" button in the footer is clicked
    $( document ).on( "click", ".next", function() {
        var next = $( ".ui-page-active" ).jqmData( "next" );
        // Check if there is a next page
        if ( next ) {
            navnext( next );
        }
    });
    // The same for the navigating to the previous page
    $( document ).on( "swiperight", ".ui-page", function( event ) {
        var prev = $( this ).jqmData( "prev" );
        if ( prev && ( event.target === $( this )[ 0 ] ) ) {
            navprev( prev );
        }
    });
    $( document ).on( "click", ".prev", function() {
        var prev = $( ".ui-page-active" ).jqmData( "prev" );
        if ( prev ) {
            navprev( prev );
        }
    });
});
$( document ).on( "pageshow", ".demo-page", function() {
    var thePage = $( this ),
        title = thePage.jqmData( "title" ),
        next = thePage.jqmData( "next" ),
        prev = thePage.jqmData( "prev" );
    // Point the "Trivia" button to the popup for the current page.
    $( "#trivia-button" ).attr( "href", "#" + thePage.find( ".trivia" ).attr( "id" ) );
    // We use the same header on each page
    // so we have to update the title
    $( "#header h1" ).text( title );
    // Prefetch the next page
    // We added data-dom-cache="true" to the page so it won't be deleted
    // so there is no need to prefetch it
    if ( next ) {
        $( ":mobile-pagecontainer" ).pagecontainer( "load", next + ".html" );
    }
    // We disable the next or previous buttons in the footer
    // if there is no next or previous page
    // We use the same footer on each page
    // so first we remove the disabled class if it is there
    $( ".next.ui-state-disabled, .prev.ui-state-disabled" ).removeClass( "ui-state-disabled" );
    if ( ! next ) {
        $( ".next" ).addClass( "ui-state-disabled" );
    }
    if ( ! prev ) {
        $( ".prev" ).addClass( "ui-state-disabled" );
    }
});

CSS CODE.

/* Set the background image sources */
#newyork { background-image: url("../img/newyork.jpg"); }
#buenosaires { background-image: url("../img/buenosaires.jpg"); }
#paris { background-image: url("../img/paris.jpg"); }
#capetown { background-image: url("../img/capetown.jpg"); }
#seoul { background-image: url("../img/seoul.jpg"); }
#sydney { background-image: url("../img/sydney.jpg"); }
/* Background settings */
.demo-page {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Transparent footer */
.demo-page .ui-footer {
    background: none;
    border: none;
    bottom: 0;
}
/* The footer won't have a height because there are only two absolute positioned elements in it.
So we position the buttons from the bottom. */
.control.ui-btn-left,
.trivia-btn.ui-btn-right {
    top: auto;
    bottom: 7px;
    margin: 0;
}
/* Custom styling for the trivia source */
small {
    font-size: .75em;
    color: #666;
}