JavaScript
Switch branches/tags
Nothing to show

README.md

Responsive-Thumbnail-Carousel

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: auto fallback 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:

  • I haven't done any optimizing for smaller screens
  • I've included @mathias' noSelect jQuery plugin to prevent annoying cursor/selection behavior while interacting with the controls; you might want to remove this depending on the content of your thumbnails