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)
- Added a
manageImagesoption to build visible pages first. Checkout the README and changes.