About this: This is a fork of the jQuery Mobile Carousel project by BlackDynamo. I found it last updated in 2010. I desperately needed to use it in a Mobile project. While it was the best free (MIT license) touch-enabled image carousel I found out there, there were a number of issues, particularly in Mobile, that I needed to improve upon to make it completely acceptable where I needed to use it. A list of the fixes I've made follow. Original Demo: http://jsfiddle.net/blackdynamo/yxhzU/ <Dependencies> Original, now alternative: You must use the jquery.ui.ipad.js plugin in order for jQuery UI widgets to recognize mobile touch events as click events. + Added by Amin Ariana: I have tested this code with jQuery Touch Punch and jQuery Mobile, and it works well. No need for the above ipad.js. Before my fork, it didn't work stably on Touch devices, and it had a strange height problem, and I've tried to improve on both of those issues. It's working correctly in iOS emulator and Android OS 2 and 4. Make sure you have the latest version of both above dependencies. The former depends on jQuery UI core: https://github.com/furf/jquery-ui-touch-punch/ </Dependencies> <Fixes by="Amin Ariana in this fork"> + on June 17, 2012: 1. Fixed horizontal offset problem where if you swipe all the way to the end or beginning on a mobile phone, the carousel falls off of its snapped position on the screen and looks like it's snapping with some offset. 2. New functionality: In horizontal swiping, multiple quick swiping gestures are now animated blazingly fast by dequeueing the animation queue. So if you skip 3 items using 3 quick gestures, you'll jump ahead to the 4th item. 3. Deprecated vertical Carousel as it makes it unmaintainable. I'm following the philosophy of do one thing and do it well. 4. Added improvements to the output DOM. 5. Simplified and shortened code, and made its function scope handling more robust. + on May 29, 2012: 1. Cleaned up much of the horizontal Carousel's inline CSS to be implicitly handled by the browser and DOM inheritance. The result is that the height of the Carousel is dynamically readjusted when the mobile orientation changes. + on May 28, 2012: 1. Fixed the problem where readjusting browser size on web or changing Mobile orientation would destroy the look of the Carousel. Completely overhauled the way Horizontal Carousel deals with calculating the width and height of items so that no fixed inline styles are used. Everything is either handled as percentages or calculated in real-time during jQuery event-handling. The result is that the Carousel will self-adjust when the width of the parent (or browser) changes, both in Mobile and on the Web. 2. Fixed the problem of the Carousel forgetting which item was in the view when orientation of the mobile phone or the size of the browser changed. This workaround is rather hacky because jQuery Draggable deals with pixels, not percentages, so I couldn't rely on CSS to get it right. Instead a resize handler detects and fixes the problem. Note: I did not fix this for vertical swiping, and may do that later. + on May 26, 2012: 1. Fix for transitions to work correctly when using in a Touch device. Tested on both iOS and Android and it works: Before this fix, after drag and drop, the list item would stay where you left it and wouldn't animate transition all the way due to losing the event argument. 2. In horizontal mode, when swiping, the code will now detect the proper height of the Carousel by setting the height of the Carousel container to be the height of the item in the list with the maximum height. </Fixes> <Options> duration: this is the number of milliseconds for the slide transition to happen. direction: whether the carousel is a "horizontal" or "vertical" carousel. minimumDrag: this is the minimum distance the carousel has to be dragged in order to trigger the page change. beforeStart: callback that will be called right as the drag event is triggered. "this" = the jQuery(list) afterStart: callback that will be called right after the start event is triggered. "this" = the jQuery(list) beforeStop: callback that will be called right as the drag has stopped. "this" = the jQuery(list) beforeStart: callback that will be called right after the drag has stopped. "this" = the jQuery(list) </Options>