carousel.md

Carousel

A jQuery plugin for simple content carousels.

• Use
• Options
• Events
• Methods
• CSS

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.

Name	Type	Default	Description
autoAdvance	boolean	false	Flag to auto advance items
autoHeight	boolean	false	Flag to adjust carousel height to visible item(s)
autoTime	int	8000	Auto advance time
contained	boolean	true	Flag for 'overflow: visible'
controls	boolean or object	true	Flag to draw controls OR object containing container, next and previous control selector (Must be fully qualified selectors)
customClass	string	''	Class applied to instance
fill	boolean	false	Flag to fill viewport if item count is less then show count
infinite	boolean	false	Flag for looping items
labels.next	string	'Next'	Control text
labels.previous	string	'Previous'	Control text
matchHeight	boolean	false	Flag to match item heights
matchWidth	boolean	true	Flag to match item widths; Requires CSS widths if false
maxWidth	string	'Infinity'	Width at which to auto-disable plugin
minWidth	string	'0'	Width at which to auto-disable plugin
paged	boolean	false	Flag for paged items
pagination	boolean or string	true	Flag to draw pagination OR string containing pagination target selector (Must be fully qualified selector)
rtl	boolean	false	Right to Left display
show	int / object	1	Items visible per page; Object for responsive counts
single	boolean	false	Flag to display single item at a time
theme	string	"fs-light"	Theme class name
useMargin	boolean	false	Use margins instead of css transitions (legacy browser support)

---

## Events

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

Event	Description
itemClick.carousel	Item clicked; Triggered on carousel item
update.carousel	Carousel position updated

---

## 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

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

Parameters

Name	Type	Default	Description
index	int		New index
silent	boolean		Flag to prevent triggering update event

next

Move to next item

previous

Move to the previous item

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

reset

Resets instance after item change

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

resize

Resizes instance

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

update

Updates carousel items

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

---

## CSS

Class	Type	Description
.fs-carousel-element	element	Target element
.fs-carousel	element	Base widget class
.fs-carousel.fs-enabled	modifier	Indicates enabled state
.fs-carousel.fs-rtl	modifier	Indicates right to left display
.fs-carousel.fs-carousel-auto_height	modifier	Indicates auto height sizing
.fs-carousel.fs-carousel-contained	modifier	Indicates overflow: hidden
.fs-carousel.fs-carousel-single	modifier	Indicates single item display
.fs-carousel-viewport	element	Carousel container
.fs-carousel-wrapper	element	Carousel container
.fs-carousel-container	element	Canister container
.fs-carousel-canister	element	Item container
.fs-carousel-canister	element	Item container
.fs-carousel-item	element	Individual item
.fs-carousel-controls	element	Controls container
.fs-carousel-controls.fs-carousel-visible	modifier	Indicates visible state
.fs-carousel-control	element	Control element
.fs-carousel-control.fs-carousel-control_previous	modifier	Indicates previous control
.fs-carousel-control.fs-carousel-control_next	modifier	Indicates next control
.fs-carousel-control.fs-carousel-control_disabled	modifier	Indicates disbaled state
.fs-carousel-pagination	element	Item element
.fs-carousel-pagination.fs-carousel-visible	modifier	Indicates visible state
.fs-carousel-page	element	Pagiantion item element
.fs-carousel-page.fs-carousel-active	modifier	Indicates active state