jQuery Mobile Carousel Demo

This demo shows how to use the jQuery Mobile Carousel

by aldomatic

HTML

<script src="https://github.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.ui.ipad.js"></script>
<script src="https://github.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.mobile.carousel.js"></script>
Horizontal
<div style="height: 200px; width: 300px">
    <ul id="carousel1" 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>
Vertical
<div style="height: 300px; width: 500px">
    <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>

JavaScript

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