This is a basic jQuery-powered carousel. There are many like it, but this is mine.
I know there are plenty of existing solutions for this sort of thing, but using someone else’s code is, for me, like wearing someone else’s clothes — it just doesn’t fit right.
It’s not a jQuery plugin, just a set of functions, which (IMHO) makes it more accessible and easier to customize. That said, there’s plenty of work that could still be done to make it more elegant; please feel free to make suggestions!
Some things I like about it:
- Minimal HTML
- Graceful
overflow: autofallback for non-JS users - CSS transitions for animations (uses Modernizr to serve jQuery animation fallback to non-transitioning browsers)
- Supports multiple carousels
- Supports carousels of any width, percentage or fixed
- Supports any number of items within the carousel
- Recalculates controls on window resize
- Makes the controls visible at all times for touch devices (again using Modernizr)
- If the controls aren't needed they don't appear at all
Things I don't like about it:
- Thumbnails within a carousel must be consistent widths
- The JS is pretty unsophisticated — it could be made more elegant
- It fails in IE8, but I haven't looked into why yet
- There seems to be a minor error in the control logic when resizing the window, but I haven't been able to nail it down
- I'm using pointer events to disable the nav controls in some circumstances — because I'm lazy I haven't put in fallbacks for non-supporting browsers yet
Other stuff to know: