SwipeJS - jQueryMobile问题

Question

我正在尝试使用HTML5，PhoneGap和jQuery Mobile构建移动应用。

我正在尝试使用SwipeJS合并图像图幻灯片库。它的工作方式很好。但是每当我尝试将它放在我的jQuery Mobile html文档中的“<div data-role="page">”内时，它根本就不显示。

我认为它与jQuery Mobiles样式表有关？我不是百分百肯定。我对移动开发很陌生。

<div data-role="page" class="page-overide" data-fullscreen="true" data-position="fixed">

        <div data-role="header">
            <a href="index.html" data-icon="arrow-l" data-transition="reverse slide">Back</a>
            <h1>Applications</h1>
        </div>


        <div data-role="content" data-theme="my-theme">
            <strong>Title</strong>

            <div id='mySwipe' style='max-width:500px;' class='swipe' data-theme='my-theme'>
                <div class='swipe-wrap'>
                    <div><b>0</b></div>
                    <div><b>1</b></div>
                    <div><b>2</b></div>
                </div>
            </div>

        </div>

    </div>

 <script src='swipe.js'></script>

更多信息：

http://jsfiddle.net/oliverj777/G7UkU/

由于

-----更新-----

如果我在样式的visibility: hidden;内注释.swipe，我现在可以看到所有图片展示位置，但现在它们都是垂直排列的？！？< / p>

Answer 1

你是否正在尝试这样

HTML：

<div id="slider" data-role="page" data-position="fixed">
     <div data-role="header" data-position="fixed">
                <a href="index.html" data-icon="arrow-l" data-transition="reverse slide">Back</a>
                <h1>Applications</h1>
            </div>
    <div data-role="content" id="contentSlider">
        <div id='mySwipe' style='min-width:500px; margin:0 auto' class='swipe'>
            <div class='swipe-wrap'>
                <div><b>1</b>
                </div>
                <div><b>2</b>
                </div>
                <div><b>3</b>
                </div>
            </div>
        </div>
        <div style='text-align:center;padding-top:20px;'>
            <button onclick='mySwipe.prev()'>prev</button>
            <button onclick='mySwipe.next()'>next</button>
        </div>
    </div>
    <div data-theme="a" data-role="footer" data-position="fixed" id="footer">
        <h1>Footer</h1>
    </div>    
</div>

JS：

var elem = document.getElementById('mySwipe');


window.mySwipe = Swipe(elem, {
    continuous: true

});

DEMO LINK