This code is an example of an infinite carousel in jQuery that allowed you to swipe in 4 directions (right, left, up and down), both on a desktop and a mobile.
This code uses jQuery, jQuery Mobile and a great code posted on Blogger to detect swipeup and swipedown by Blackdynamo (link included in the file). All the libs are included, so the code will work out of the box.
Simply put the files on a webserver and open index.html from a mobile or a desktop.
A working demo is available online.
The page displays a block showing its x and y coordinates. When a user swipes on the block, we compute direction and specifications for the next block to appear. We create that block and make it slide in front of the user. We then delete the old block. We never have more that 2 blocks at a time in the DOM.
This code was tested on Chrome 27.0, Firefox 21, Safari 6.0.5 and mobile Safari 6.
Make it a jQuery plugin to apply on any div. Make a block follow the finger when swiped.
None for the moment.
You are welcome to contribute to this project !