使用 jquery mobile 的 swipeJS

Question

我尝试在我的 jquery 移动应用程序中实现 swipeJS。

这是我实现 swipeJS 的页面代码。

完整代码：http://jsfiddle.net/unTHs/ （jsfiddle上的输出不一样）

<div id="slider" data-role="page">
<div data-role="content" id="contentSlider">

<div id='mySwipe' style='max-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>

我的问题是，我得到以下输出。 我把每一个“图片”都放在一边。没有图片幻灯片。

我不知道问题是什么。 :(

Answer 1

我让它工作了。最大的问题是 .live() 函数已被弃用，不再是 jQuery 1.9 的一部分。

工作小提琴：http://jsfiddle.net/Spokey/unTHs/2/

改变这个

$('#contentSlider').live('pageshow', function (event, ui) {
  var elem = document.getElementById('mySwipe');
  window.mySwipe = Swipe(elem, {
  });
});

到此

var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
  // startSlide: 4,
  // auto: 3000,
  // continuous: true,
  // disableScroll: true,
  // stopPropagation: true,
  // callback: function(index, element) {},
  // transitionEnd: function(index, element) {}
  // you can leave out these comments.
});

请参阅 fiddle 了解更多信息，您可能还缺少一些 CSS（不确定）。

新的 FIDDLE http://jsfiddle.net/Spokey/unTHs/3/
设置容器的min-width 和width。图片width 和height 到100%