Responsive Carousel Project: Now Open Source
Posted by Scott on 08/09/2012
In our responsive client work, we frequently find ourselves in need of a carousel component that is lightweight, fluid in layout, usable with different input modes (mouse, keyboard, touch), and extensible to the particulars of each implementation. We've found that most third-party carousels available online fall short of these requirements in one way or another, so we built our own, and recently made it public for others to use as well.
The Responsive Carousel project is available on Github. It’s dependent on jQuery to work. But it’s is also compatible with “Shoestring,” a minimalist DOM framework we’ll be releasing soon.
To use the responsive carousel, just reference the following required
CSS and JS files, and add a class of
carousel to any element in your
page that contains a series of sibling elements:
With the default build, slides switch immediately with "Prev" and "Next" buttons. We've created several slide transition options (among other extensions—see more below) like the slide/drag transition, which you can apply by adding a data attribute and including some additional CSS.
Extensions & Demos
There are a range of transition, interaction and display extensions in
src folder, such as a
and even an extension that automatically adjusts the number of visible
elements per slide, depending on the viewport
If you’d like to create a build that includes certain extensions, your
can add them to the JS files listed under
concat in the
file, and run
grunt from a command line (you’ll need Grunt and Node.js
installed on your machine for this to work). Be sure to include the
relevant CSS files to match the JS features you choose.
Check out the test/functional/ directory for demos of many of the extensions listed above, also previewed in the iframe below:
We will continue to update the project readme with information about how to use the responsive carousel. Please refer there for current information.
Issues, Ideas, and Contributions
If you find a bug or have a fix or enhancement, please use the issue tracker or send us a pull request.