CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobileswipe
alexander-fire
alexander-fire

Reputation: 1082

swipeJS with jquery mobile

I tried to implement the swipeJS in my jquery mobile application.

Here is my code of the page on which I implement the swipeJS.

FULL CODE: http://jsfiddle.net/unTHs/ (output on jsfiddle is not the same)

<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>

My problem is, that I get the following output. I get every "picture" on the side. No picture slide.

I have no idea whats the problem is. :(

enter image description here

Upvotes: 0

Views: 1708

Answers (1)

Spokey
Spokey

Reputation: 10994

I got it working. The big problem is the .live() function that is deprecated and not part of jQuery 1.9 anymore.

Working Fiddle: http://jsfiddle.net/Spokey/unTHs/2/

Change this

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

To this

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

See fiddle for more, you are probably also missing some CSS (not sure).

NEW FIDDLE http://jsfiddle.net/Spokey/unTHs/3/
Set the min-width and width of the container. The the images width and height to 100%

Upvotes: 2

Related Questions