Responsive Carousel Project: Now Open Source

Posted by Scott on 08/09/2012

Topics:

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.

How-to

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:

Additional information

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.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site

Comments

Works well on my phone.
There are so many slideshow doodads out there but this looks like the biz

Comment by nice work,thanks on 08/17  at  08:48 PM

Any future implementation of loading images dynamically as each one is required or maybe load the first one and all others after all the DOM has finished downloading and then start secuencially loading the rest of the images could be of great optimization for mobile.

Comment by Feature Request on 08/18  at  04:55 AM

If you go to the demos, you’ll find one that integrates with our ajaxInclude plugin to do something along the lines of what you’re requesting, I think: http://filamentgroup.github.com/responsive-carousel/test/functional/ajax.html

Comment by Scott (Filament) on 08/19  at  04:20 PM

I’ve been using Mat Marquis’ responsive and accessible carousel on my homepage. I’ve been pretty happy with it (except for there being no variety with transitions). I’m seriously considering implementing your new carousel.

I’ve taken a quick look at your source code with Firebug and I noticed that there doesn’t seem to be any ARIA support (unlike Mat’s). Is this true or was this not an aim for this project?

Comment by Gamiel Lyons on 08/21  at  07:57 AM

Our gallery images are different sizes - some portrait, some landscape - is it possible to allow the images to flow off the side of the screen with this carousel? Additionally it doesn’t seem to be putting the slides side by side unless the page is resized (when the page loads, by default, they appear one under the other according to page width) - is there something we’ve missed?

Comment by Michael on 08/23  at  10:20 AM

Commenting is closed for this post.

Book cover: Designing with Progressive Enhancement

Enjoy our blog? You'll love our book.

For info and ordering: Visit the book site