0

我试图在我的 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>

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

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

在此处输入图像描述

4

1 回答 1

2

我让它工作了。最大的问题是该.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%

于 2013-04-25T09:20:45.253 回答