Carousel Examples

Carousel takes simple HTML- and CSS-only carousels and progressively enhances them with features such as page lists, scrolling, class-toggling, timers, timer offsets as well as touch and keyboard events. By following a basic HTML pattern and using some basic CSS, your carousels will also work, to a degree, without JavaScript enabled.

Grab or fork the code from abitgone's jQuery Plugins repository.

All of the carousels on this page will work, with obvious limitations, with JavaScript disabled.

Basic Usage

Here is an example of a carousel, with default settings:

The carousels above uses a very minor variation on the following, basic markup:

<div data-carousel>
    <div data-carousel-items>
        <div data-carousel-item id="item1">
            <-- Your Item Content Goes Here -->
            <a href="#item3" data-carousel-pager class="pager-prev"><span>Prev</span></a>
            <a href="#item2" data-carousel-pager class="pager-next"><span>Next</span></a>
        </div>
        <div data-carousel-item id="item2">
            <-- Your Item Content Goes Here -->
            <a href="#item1" data-carousel-pager class="pager-prev"><span>Prev</span></a>
            <a href="#item3" data-carousel-pager class="pager-next"><span>Next</span></a>
        </div>
        <div data-carousel-item id="item3">
            <-- Your Item Content Goes Here -->
            <a href="#item2" data-carousel-pager class="pager-prev"><span>Prev</span></a>
            <a href="#item1" data-carousel-pager class="pager-next"><span>Next</span></a>
        </div>        
    </div>
</div>

Only the first set of <a> elements are required if you want pagers. The entire set is included to allow users without JavaScript to use the carousels.

Additional classes are used throughout the examples, but these are all mainly for style purposes. While you are free to use the CSS used in the examples, the intention is that you — the designer — will customise the look of your carousel yourself; this plugin simply adds the required behaviours.

Each data-carousel-item can contain any content you like. In all of the examples on this page, the items are empty, using the background-image CSS property to style them, but you can put any additional content in and style it as you please.

Responsive Design

When using the horizontal and vertical scrolling styles, the positioning uses percentage offsets instead of pixel-based offsets. To demonstrate this capability, simply resize your browser.

Options

The following data-carousel-* variables and class names can be used to configure additional options:

data-carousel-style (default: horizontal)
Sets the style of the carousel. Valid values are horizontal (default), vertical and class-only. If you’re planning to support clients without JavaScript, you should also add the .carousel-horizontal, .carousel-vertical or .carousel-classonly classes to your carousels as appropriate.
data-carousel-pagelist
Adds a page list to the carousel container, containing links to each item.
data-carousel-timer="10000" (milliseconds)
Automatically cycles through the pager items every 10000 milliseconds (10 seconds). The timer is paused when hovering over or touching the carousel, and resumed when leaving or releasing.
data-carousel-timer-delay="2000" (milliseconds)
Adds a 2000 millisecond (2 second) delay to the first cycle.
data-carousel-timer-nopause
Prvents the carousel from pausing on hover or touch events.
data-carousel-notouch
Prevents the carousel from responding to touch events.

Examples

By using different combinations of the above options with your own CSS, you can create a variety of carousels:

Horizontal Scrolling

The default style of carousel. Uses absolute positioning on the data-carousel-items container to scroll left and right. CSS3 transitions are used to smoothly transition the left CSS property. The page list is also enabled on this carousel, by including the data-carousel-pagelist attribute.

Vertical Scrolling

Uses absolute positioning on the data-carousel-items container to scroll up and down, with CSS3 transitions used to smoothly transition the top CSS property. The basic styles used have also been applied to the pagelist to change the appearance to a vertical list.

Class Toggling

This style can be used to roll your own styles. The opacity CSS property is used in conjunction with CSS3 transitions to create a cross-fading carousel. Additionally, there is no page list on this example.

Timer Delay

If you need more than one carousel in a confined space, you may wish to use data-carousel-timer-delay to delay the transitions — the example below triggers every 6000ms, with a 500ms delay for the second carousel and a 1000ms delay for the third. This example also removes the pagers (and thus, disables touch events) and uses data-carousel-timer-nopause to prevent the carousel from pausing on hover events.