Question

I am on a slideshow that users can navigate by clicking the next or pre buttons. At the time of click, I am loading the next or prev image into the img src, as you can see below.

I am trying to maintain compatibility on touch devices as well, and would like to enable swipe to navigate from one photo to the next. My concern with implementing a normal swipe event to handle slideshow navigation, is that it would not have a fluid feel, and when the swipe event would be triggered, there would be a bit of lag and the next image would be loaded, as if the user just clicked the next or prev arrow.

What I am trying to accomplish is that fluid feel that many tablets / smartphones have when traversing through a photo album.

I’d truly appreciate any help accomplishing this,

Many thanks in advance

My JavaScript

    var index=0;

    $('.catalog-img-container').attr("src", img_array[index]);
    $('#dialog').jqm();
    $(".next").click(function(){
        $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
    });         
    $(".previous").click(function(){
        if (--index < 0) index = arrayLength - 1;
        $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
    });         

My Markup

        <div  class="catalogFrame">
            <img class="catalog-img-container" src="">
        </div>

Answer 1

Add a swipeleft and swiperight to your img container:

$('.catalog-img-container').on('.catalog-img-container', 'swipeleft', function () {
    //next img
    $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
}).on('.catalog-img-container', 'swiperight', function () {
    //prev img
    if (--index < 0) index = arrayLength - 1;
    $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
});

If you want to get more natural feeling change these config options so swipe event can trigger sooner then later:

$(document).bind("mobileinit", function(){
    $.event.special.swipe.horizontalDistanceThreshold = 30; //(default: 30px) – Swipe horizontal displacement must be more than this.
    $.event.special.swipe.verticalDistanceThreshold = 75; //(default: 75px) – Swipe vertical displacement must be less than this.
});

More info about this can be found here: http://jquerymobile.com/test/docs/api/events.html

That is basically that, swipe events are almost fluid on mobile phones (I have a carousel jQuery mobile implementation and it works just fine) so I dont think you are going to have much problems.

Here’s also my example of swipe events : http://jsfiddle.net/Gajotres/Np3G4/ It is not using jQM swipe implementation but you can test it on Android and iOS platform, it will give you feeling (jQM swipe events work just like that). And here’s jQM implementation: http://jsfiddle.net/Gajotres/qBbsX/