Mobile Carousel plus Swipes

by dirkk0

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<script src="https://github.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.mobile.carousel.js"></script>
<script src="https://github.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.ui.ipad.js"></script>
<div data-role="page" id="p1">
    <div data-role="header"><h1>P1</h1></div>
    <div data-role="content"><p>I'm first in the source order so I'm shown as the page. You can slide me to the right.
<div style="height: 100px; width: 150px">
    <ul id="carousel2" style="display: none;">
        <li><div style="width: 100%; height: 100%; background-color:#381;">Page 1</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#837;">Page 2</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#999;">Page 3</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#738;">Page 4</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#142;">Page 5</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#927;">Page 6</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#987;">Page 7</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#187;">Page 8</div></li>
    </ul>
</div>      

        </p>
        
    </div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p2">
    <div data-role="header"><h1>P2</h1></div>
    <div data-role="content"><p>I'm second in the source order so I'm shown as the page.</p></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p3">
    <div data-role="header"><h1>P3</h1></div>
    <div data-role="content"><p>I'm third in the source order so I'm shown as the page.</p></div>
    <div data-role="footer"><h4>Page Footer</h4></div>
</div>
<div data-role="page" id="p4">
    <div...

CSS

#fixed1 { width: 220px; height: 40px; background-color: yellow; }

JavaScript

(function($) {
        $("#carousel1").carousel();
        $("#carousel2").carousel({direction: "vertical"});
    })(jQuery);

$('div.ui-page').live("swipeleft", function() {
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, 'slide');
    }
});
$('div.ui-page').live("swiperight", function() {
    var prevpage = $(this).prev('div[data-role="page"]');
    // swipe using id of next page if exists
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, 'slide', true);
    }
});