It's better than all the others, of course:
- Responsive resizing on window resize (debounced, don't worry), height adapts to content
- Swipe-enabled for touch devices
- Accessible navigation elements (use your keyboard)
- Circular mode without cloning elements (they are shifted around instead)
- Special features like:
Is uses Mark Dalgleish's «Highly Configurable jQuery Plugins» pattern.
Tested on: IE 7-10, iOS 7, current versions of Firefox, Chrome, Safari. It is highly likely to be working on older versions, too.
Word of caution: If you don't need the features listed above, this plugin might be overkill and something like Swipe might serve you better.
Demos: http://backflip.github.com/jquery-carousel/demo/
Basic markup (the node type doesn't matter, the elements are identified by class name):
<div class="carousel" id="carousel"> <div class="carousel-frame"> <ul class="carousel-slider"> <li class="carousel-slide">1</li> <li class="carousel-slide">2</li> <li class="carousel-slide">3</li> </ul> </div> <!-- Note: this is where navigational elements will be inserted if specified --> </div>
- Include some basic styling (see jquery.carousel.css)
- Include jQuery (>= 1.8) and the script
- Initialize carousel:
$('#carousel').carousel(options);
or
var carousel = new Carousel($('#carousel'), options); carousel.init();
- init(options): Add DOM elements and initialize carousel
- enable: Bind events for navigation, start autoplay if set
- disable: Unbind events for navigation stop autoplay
- resize: Resize elements based on available width and their content
- goTo(index, skipAnimation)
- next
- prev
- update(options): Override current options and update carousel accordingly
- destroy: Remove added DOM elements, unbind events
Warning: Some options were moved in version 1.2.
{ domSelectors: { frame: '.' + namespace + '-frame', slider: '.' + namespace + '-slider', slides: '.' + namespace + '-slide' }, templates: { navContainer: '<div class="' + namespace + '-navs" aria-hidden="true" role="presentation" />', navItemPrev: '<button class="' + namespace + '-nav" role="presentation">Show previous slide</button>', navItemNext: '<button class="' + namespace + '-nav" role="presentation">Show next slide</button>', counter: '<div class="' + namespace + '-counter" aria-hidden="true" role="presentation">%current% of %total%</div>', handleContainer: '<div class="' + namespace + '-handles" aria-hidden="true" role="presentation" />', handleItem: '<button class="' + namespace + '-handle" role="presentation">Slide %index%</div>' }, stateClasses: { isInitialized: 'is-initialized', isEnabled: 'is-enabled', isDisabled: 'is-disabled', isActive: 'is-active' }, animation: { duration: 300, // milliseconds step: 1, // number of slides per animation (might be lower than number of visible slides) easing: 'ease-in-out' }, behavior: { circular: false, // go to first slide after last one autoplay: 0, // auto-advance interval (0: no autoplay) pauseAutoplayOnHover: true, keyboardNav: true // enable arrow and [p][n] keys for prev / next actions }, layout: { horizontal: true, // set to false for vertical slider groupedHandles: true, // combine handles to group if visibleSlides > 1 (e.g. "1-3", "4-6", "7") fixedHeight: true, // set height based on highest slide responsive: true, // whether to update the dimensions on window resize (debounced) visibleSlides: 1, // how many slides to fit within visible area (0: calculate based on initial width) gutter: 0 // spacing between slides }, elements: { // which navigational elements to show prevNext: true, // buttons for previous / next slide handles: true, // button for each slide showing its index counter: true // "Slide x of y" }, events: { // custom callbacks start: false, // function(targetDomIndex, targetSlideIndex) { ... } stop: false // function(targetDomIndex, targetSlideIndex) { ... } }, initialSlide: 0, // which slide to show on init touch: { // whether to enable touch support and which criteria to use for swipe movement enabled: true, thresholds: { speed: 0.4, // multiplied by width of slider per second distance: 0.3 // multiplied by width of slider } }, $syncedCarousels: null // jQuery collection of carousel elements to sync with }