Responsive Carousel Project: Now Open Source
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
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
Permalink to '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
Permalink to '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
Permalink to '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
Permalink to '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.