使用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.
});

请注意小提琴，你可能也错过了一些CSS（不确定）。

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