javascript - swipeJS with jquery mobile -
i tried implement swipejs in jquery mobile application.
here code of page on implement swipejs.
full code: http://jsfiddle.net/unths/ (output on jsfiddle not 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, following output. every "picture" on side. no picture slide.
i have no idea whats problem is. :(
i got working. big problem .live()
function deprecated , 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) {} // can leave out these comments. });
see fiddle more, missing css (not sure).
new fiddle http://jsfiddle.net/spokey/unths/3/
set min-width
, width
of container. the images width
, height
100%