How can I manage the horizontal scroll on a carousel in a mobile website?

问题

I have a website with a carousel of images. On mobile, I'd like to "move" this carousel when I move the finger in horizontal.

This carousel is ready to work, already done with jquery (but handle with a click handlers). I need handle it with horizontal movement.

Is there a jquery plugin that allow me to handle this movement?

回答1:

If you are using jQuery mobile you can easily use swipe events.

Example:

$("#carousel").bind('swipeleft',function(event, ui){

});

If you are not using jQM take a look at this framework: http://wipetouch.codeplex.com/. It is lightweight. There are also few other frameworks but I never used them. Few months ago I have created a jQM app with carousel and jQM swipe events. It works just fine, without performance problems.

EDIT :

Here's an working carousel example (With swipeleft event, you can also implement swiperight but this is only an example) for you: http://jsfiddle.net/Gajotres/Np3G4/ I have tested it on my PC (just drag your mouse to the left) and Android 4.1 (swipe to left), but from my past experience it also works on iPad (so i believe it should work on iPhone). This code is combination of this carousel and my implementation of common jQM swipe events. You can still use jQM framework only for swipe events.

EDIT 2:

This version works on iPad without jQuery mobile framework: http://jsfiddle.net/Gajotres/qCB6w/. It uses touchwipe framework: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library.I hope this is all you need to make it work.

来源：https://stackoverflow.com/questions/13629491/how-can-i-manage-the-horizontal-scroll-on-a-carousel-in-a-mobile-website