LogoFrontfire Demo

Carousel

A carousel contains multiple items that are arranged horizontally and can be scrolled through. The number of items visible at a time is configurable. Below are several demonstrations of different carousel configurations.

The options are easiest specified as data-opt HTML attributes with the carousel HTML element. The following options are supported for carousels:

Option Type Description Default
active Number The index of the initially active item. 0
items Number The number of items concurrently visible. 1
dotsEach Number Show an indicator dot each x items. -1 means the same value as items. -1
gutter Number The margin between two items in pixels. 0
indicator Boolean Shows the indicator dots for the active item. true
autoPlay Boolean Starts looping through all items automatically. false
autoPlayInterval Number Autoplay item switch interval in milliseconds. 4000
pauseOnHover Boolean Pauses autoplay while the carousel is hovered with the mouse. true
dragCursor String The mouse cursor to show during dragging.
animation String The animation between items. Values: slide-all, slide-in, slide-out, fade, slide-fade.
For more than one visible item, only slide-all is supported and automatically used.		 slide-all

When the active item is changed, an activeItemChange event is raised.

The active item can be determined and switched by code. This is done through a plugin extension function with a syntax similar to other jQuery functions.

var index = $("#carousel1").carousel.activeItem();
$("#carousel1").carousel.activeItem(indexOrItem);

Simple carousel

A simple carousel consists of a <div class="carousel"> element with a <div> child element for each item. Items can contain anything and will be arranged to the full width of the carousel so that only a single item is visible. Items are individually coloured and have additional padding in this example.

Below the visible item there is a page indicator that tells the user which is the currently visible page and how many pages there are. The pages can be switched by dragging them to the left or right with any pointing device (mouse, touch, stylus).

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

<div class="carousel">
    <div>Item 1</div>
    <div>Item 2</div>
    ...
</div>

Multiple visible items

Multiple items can be visible by setting the items option to a number greater than 1. The gutter option can be used to keep same spacing between the items.

3 items out of 6 visible, varying item height

Item 1
Item 2
Line 2
Line 3
Item 3
Line 2
Item 4
Item 5
Item 6

3 items out of 7 visible

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

3 items out of 7 visible, with individual indicator dots

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

4 items out of 2 visible

Item 1
Item 2

Inline and dark indicator

The indicator dots can be moved to the inside of the carousel by adding the inline-indicator CSS class to the carousel element.

The indicator dots can be inverted for light display on a dark background by adding the inverted-indicator CSS class to the carousel element. (The indicator is automatically inverted when within a dark element but can be inverted back again with this class.)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Smaller indicator

The indicator dots size can be decreased by adding the small-indicator CSS class to the carousel element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Autoplay

Below are examples with auto-play enabled. See the options above.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Different animations

The default animation slide-all can be seen in the examples above. Here are the other supported animations.

slide-out

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-in

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Different animations with autoplay

slide-out

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-in

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6