Test ...

This demo shows how to use the jQuery Mobile Carousel ... test

by dirkk0

HTML

<script src="https://github.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.ui.ipad.js"></script>
Top
<button id="jump1">Jump</button>
<div style="height: 100px; width: 500px">
    <ul id="carousel1" style="display: none;">
        <li class="li">
            <div class="top" style="background-color:#381;">
                Page 1
            </div>
        </li>
        <li class="li">
            <div class="top" style="background-color:#837;">
                Page 2
            </div>
        </li>
        <li class="li">
            <div class="top" style="background-color:#999;">
                Page 3
            </div>
        </li>
        <li class="li">
            <div class="top" style="background-color:#142;">
                Page 4
            </div>
        </li>
    </ul>
</div>
Bottom
<div style="height: 300px; width: 500px">
    <ul id="carousel2" style="display: none;">
        <li>
            <div class="bot" style="background-color:#381;">
                Page 1
            </div>
        </li>
        <li>
            <div class="bot" style="background-color:#837;">
                Page 2
            </div>
        </li>
        <li>
            <div class="bot" style="background-color:#999;">
                Page 3
            </div>
        </li>
        <li>
            <div class="bot" style="background-color:#142;">
                Page 4
            </div>
        </li>
    </ul>
</div>

CSS

.top{ height: 100%; }

.bot{width: 100%; height: 100%;}

.li{background: blue;}

JavaScript

(function($) {
    $.fn.carousel = function(options) {
        var settings = {
            duration: 300,
            direction: "horizontal",
            minimumDrag: 20,
            beforeStart: function(){},
            afterStart: function(){},
            beforeStop: function(){},
            afterStop: function(){},
            itemwidth: 100,
            startingoffset:0
        };

        $.extend(settings, options || {});

        return this.each(function() {
            if (this.tagName.toLowerCase() != "ul") return;

            var originalList = $(this);
            var pages = originalList.children();
            var width = originalList.parent().width();
            var height = originalList.parent().height();
            var calculatedOffset = width * (settings.startingoffset/100);
            var calculatedWidth = width * (settings.itemwidth/100);
            

            //Css
            var containerCss = {position: "relative", overflow: "hidden", width: width, height: height};
            var listCss = {position: "relative", padding: "0", margin: "0", listStyle: "none", width: (pages.length * calculatedWidth)+calculatedOffset};           
            var listItemCss = {width: calculatedWidth , height: height};
            
            var container = $("<div>").css(containerCss);
            var list = $("<ul>").css(listCss);

            var currentPage = 1, start, stop;
            if (settings.direction.toLowerCase() === "horizontal") {
                list.css({float: "left"});
                $.each(pages, function(i) {
                    var li = $("<li>")
                            .css($.extend(listItemCss, {float: "left"}))
                            .html($(this).html());
                    list.append(li);
                });
                list.animate({ left: calculatedOffset }, settings.duration);                       
                list.draggable({
                    axis: "x",
                    start:...