Question

I’m looking for jQuery HTML scroller plugin that will have swipe navigation on mobile devices and will work on desktop too.

Basically I need to rotate news using swipe gesture, like on iPad IMDB app, just in browser.

Here is screenshot of it:

While searching I’ve found iScroll and Sencha Touch scripts, but they are too “fat”.

Can anyone recommend something like this?

Thank you.

UPD: Just found very cool carousel on codecanyon, exactly what I need. Sadly it’s commercial.

Answer 1

You need to make use of the touchstart and touchmove events (there’s also a touchend event but it’s not needed in this case), they work the same way as mouse events in a sense.

The following below is a concept example as I’ve never personally used these before, but it should be fairly on point.

var startX = 0, startY = 0;

$('.selector.').bind('touchstart', function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
});

$('.selector.').bind('touchmove', function(event) {
    endX = event.touches[0].pageX;
    endY = event.touches[0].pageY;

    if (startX - 100 < endX)
    {
        // SWIPE LEFT CODE HERE

        // The startX - 100 is to give some leeway for the user, they have to 
        // move there finger at least 100 pixel difference to the left to trigger
    }
    elseif (endX > startX + 100)
    {
        // SWIPE RIGHT CODE HERE

        // The startX + 100 is to give some leeway for the user, they have to 
        // move there finger at least 100 pixel different to the right to trigger
    }
});

The basic concept is you have a touchstart event and log the position they start at and a touchmove event to determine which way they are swiping, if the x is lower they’re swiping left, x higher then right, y higher then up and y lower then down.

This looks like a good resource to check out http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html