There are good number of third party plugins that you can use with jQuery Mobile for this purpose. But I thought of showing off the simple way of doing the basic Image Carousel.
First our html page would look like as below
Header
Then our JS would look like below.
var i = 0; var imgURL = []; imgURL.push('http://jquerymobile.com/wp-content/uploads/2013/02/devices.png'); imgURL.push('http://asset1.cbsistatic.com/cnwk.1d/i/tim/2013/02/20/35536085_620x433.jpg'); imgURL.push('http://ctim.saltsidecdn.net/ikman/large/7004d606-4fd0-11e2-8ea2-22000a270a3d.jpg'); $("#myImagePage").swiperight(function () { if (i < (imgURL.length - 1)) { i++ } else { i = 0; } var imgStr = ""; $('#ImageDiv').html(imgStr); }); $("#myImagePage").swipeleft(function () { if (i > 0) { i-- } else { i = (imgURL.length - 1); } var imgStr = " "; $('#ImageDiv').html(imgStr); });
Done.! it should work now. Check out this fiddle http://jsfiddle.net/R3bZ8/13/.
Subscribe to our mailing list
Subscribe to our mailing list and receive a free udpates
Leave a Reply