Carousel

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<div class="carousel">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

$(".carousel").carousel();

Using Carousel

Main

carousel.js
carousel.css

Dependencies

jQuery
core.js
mediaquery.js
touch.js

Basic

Carousel will treat immediate children as items to scroll through. By default, all items will be sized to the width of the carousel.

$(".target").carousel();

<div class="target">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Show

Set the show option to a value, or object, at initialization to allow more items to be visible at once. If passing an object keys should be valid min-width media query values, including units.

$(".target").carousel({
  show: 2
});

$(".target").carousel({
  show: {
    "740px" : 2,
    "980px" : 3
  }
});

Note: Carousel items that don't meet jQuery's :visible selector requirements will not be counted as active items. This can be useful when filtering or updating a set of items.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-carousel-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

disable

Disables instance of plugin

$(".target").carousel("disable");

enable

Enables instance of plugin

$(".target").carousel("enable");

jump

Jump instance of plugin to specific page; Alias of jumpPage

$(".target").carousel("jump", 1);

Parameters

jumpItem

Jump instance of plugin to specific item

$(".target").carousel("jumpItem", 1);

Parameters

jumpPage

Jump instance of plugin to specific page

$(".target").carousel("jumpPage", 1);

Parameters

next

Move to next page; Alias of nextPage

$(".target").carousel("next");

nextPage

Move to next page

$(".target").carousel("nextPage");

previous

Move to the previous page; Alias of previousPage

$(".target").carousel("previous");

previousPage

Move to the previous page

$(".target").carousel("previousPage");

reset

Resets instance after item change

$(".target").carousel("reset");

resize

Resizes instance

$(".target").carousel("resize");

update

Updates carousel items

$(".target").carousel("update", "...");

CSS