Simple basic Image Carousel with jQuery Mobile

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

Did you enjoy this article?
Signup today and receive free updates straight in your inbox. We will never share or sell your email address.

Leave a Reply