A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard
Get the production version (.min.js) or the development version (.js) from the releases page. Click the dist-<version>.tar.gz
download.
In your web page:
<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>
The default build includes the slide/drag transition that 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>
There are other extensions in the src
folder, such as flip and fade transitions, autoplay, keyboard handling, pagination, and more. If you'd like to create a build that includes certain extensions, just add them to the JS files listed under concat
in the /grunt.js
file, and run grunt
from a command line.
Check out the test/functional/
directory for demos.
The default carousel (responsive-carousel.js
) returns to the initial active item(s) once it reaches the end of its list. This behavior can be disabled by annotating the carousel DOM element with data-loop='false'
and including responsive-carousel.loop.js
directly after the core carousel JS. For example:
...
<script src="path/to/responsive-carousel.js"></script>
<script src="path/to/responsive-carousel.loop.js"></script>
...
<div class="carousel" data-loop="false">
<div>
<img src="...">
</div>
...
</div>
Then, after both the carousel and plugin have loaded you can initialize as normal.
$( ".carousel" ).carousel();
When the carousel reaches the end or beginning of the list, the inserted navigation links (a.next
and a.prev
) will be decorated with an additional disabled
class. This class receives no properties from the library by default.
For a demo see test/functional/no-loop.html
.
To declaratively set the speed of the carousel, add a data-interval
to the carousel container with a value set in milliseconds.
<!-- set the carousel to change every 5 seconds -->
<div class="carousel" data-autoplay data-interval="5000">
<div>
<img src="...">
</div>
...
</div>
```
For a demo see `test/functional/flip-auto.html`.
### More
More coming soon.
## Examples
Check out the [`test/functional/`](http://filamentgroup.github.com/responsive-carousel/test/functional/) directory for examples.
## Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](https://github.com/cowboy/grunt).
_Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!_
## Release History
_(Nothing yet)_
## License
Copyright (c) 2012 Filament Group, Inc.
Licensed under the MIT, GPL licenses.