Carousel.js

I was in need of a carousel, here were some of my requirements:

• Memory efficient. It creates the illusion of an infinite carousel but it only uses as many elements as necessary to fake it.
• CSS3 translate3d based, because thats where the best performance is to be found on mobile
• Had both snapping and non-snapping behaviour (big swipes trigger snapping, small touches do not)
• Provide both looping and non-looping behaviour
• Page widths that were configurable (not always 100% width)
• Works well enough on Android 2.3 to be respectable
• Works on desktop with a mouse (although I think the user experience of this interaction-heavy interface isn’t ideal)

SwipeView was pretty close but my attempts to bend it to my will were in vain. The biggest problem I faced was the lack of unit tests. As I made my modifications (read: hacks) I introduced unintended instablity. I hate working without tests and testing everything everytime I made a small change was inefficient. I wanted to build in a test driven way.

Every web developer eventually builds their own carousel, so I accepted my fate and built Carousel.js.

Carousel.js addresses my laundry list above, but by no means is it perfect (Pull Requests Welcomed).

Some of my planned future improvements:

• Remove dependencies on jQuery and Lo-Dash (I know, I know, but they were already dependencies for the larger project so why not make my life a bit easier)
• Incorporate something like waitForImages to manage page construction to optimize for perceived performance (eg. build visible pages first, let images load, then build buffer pages)

Update:

• Added a manageImages option to build visible pages first. Checkout the README and changes.