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:
<script src="jquery.js"></script> <script src="dist/responsive-carousel.min.js"></script> <link href="src/responsive-carousel.css" rel="stylesheet"> <div class="carousel"> <div> <!-- carousel item content here --> </div> <div> <!-- carousel item content here --> </div> </div>
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.
<script src="jquery.js"></script> <script src="dist/responsive-carousel.min.js"></script> <link href="src/responsive-carousel.css" rel="stylesheet"> <link href="src/responsive-carousel.slide.css" rel="stylesheet"> <div class="carousel" data-transition="slide"> <div> <!-- carousel item content here --> </div> <div> <!-- carousel item content here --> </div> </div>
Extensions & Demos
There are a range of transition, interaction and display extensions in the
src folder, such as a fade transition, touch-draggable slide and flip transitions, autoplay, keyboard handling, pagination, and even an extension that automatically adjusts the number of visible elements per slide, depending on the viewport dimensions.
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
/grunt.js 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.