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

詳細については fiddle を参照してください。おそらくいくつかの CSS も欠落しています (不明)。

NEW FIDDLE http://jsfiddle.net/Spokey/unTHs/3/コンテナのandを
セット。画像とはmin-widthwidthwidthheight100%

于 2013-04-25T09:20:45.253 に答える