javascript - swipeJS 与 jquery 移动

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 的一部分。

工作 fiddle :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。图像宽度和高度为100%