What Problem Does This Solve?

When to Use This Pattern

Use when the user's mental model of a topic or of a set of objects is closely tied with imagery, such as a visual representation of the object, and the available screen real estate is too small to accommodate all the items at once.

What's the Solution?

1. Provide focus
2. Enable scrolling
3. Plan the item order

Provide Focus

Display at least one item and (optionally) show one item in focus, which can, for example, may be the first or centermost item.

• The item in focus might have "selected" state (if so, the carousel must support that state for all images).
• The focused item may be given special visual treatment, such as a change in size (often increased size but possibly also decreased size along with additional info), or a clear indicator of being "in front" of the other items.
• Functionality may be offered for a focused item, such as flag (to add to a list or save, as of favorites) or antiflag (for "don't show me again").
• Carousels, whether or not they feature a single item selected in focus, must permit the user to select any visible item to act on it or obtain further information about it (except when the scrolling mechanism only allows for forward and backward movement, as in some phone interfaces).

Enable Scrolling

Provide a means for scrolling:

• Optionally show (some or all of) one (or more) additional items on either side of the central item (or items) to invite the user to scroll.
  
• Offer a mechanism to see the next or previous morsel that fits into the viewport.
  • This mechanism might, for example, be arrows, click/drag, a scrollbar, or a faded hint of upcoming content ().
  • A "belt and suspenders" approach incorporating multiple scrolling mechanisms will not necessarily overcomplicate the interface.
    
  • Scroll arrows can be inconvenient for backtracking if placed widely separated.
  • Optionally have the carousel scroll automatically to invite manual scrolling.
  • Optionally, when the task context is not inherently clear, have the carousel load with an animation to reveal how it works and thus invite the user to interact with it. For example, load the carousel images onto the "stage" from left to right and stop at a point where the first and last image are partially visible. What this does is tell the user that the content can be engaged with. In addition, it defines for the user the content viewing area and its supporting navigational framework:
• Scrolling may be continuous (a loop) or linear.
• Scrolling may reveal one new item at a time or a page (set) of items all at once.
• Scrolling may be unidimensional (usually horizontal) or bidimensional (horizontal and vertical).
• Provide the user with a visual cue of where they are in the data set.
• The carousel may be presented (skinned) in any number of ways from a simple filmstrip/slideshow effect to a 3-D perspective emphasizing the rotation metaphor.
  

Why Use This Pattern?

The carousel allows a designer to better utilize page real estate while providing an engaging experience for object selection.

Depending on the context, a carousel may be used to provide a peripheral browsing option when the users attention is primarily focused on something that demands a large portion of the available real estate (such as a video display). If the user is not "shadowing" simultaneous and possibly dynamic sources of info and just wants to see the maximum number of choices, either a list or grid view may be more appropriate. Thus, when deciding whether to employ a carousel, consider: How is system helping the viewer manage her attention? What is the task?

Special Cases

One common antipattern seen online is an implementation in which the center of the menu is the selection area and when the users move the pointer from the center, the menu scrolls in opposite direction. The speed of scrolling increases slightly when the pointer is further from the center. This can be a counterintuitive, frustrating experience in which the user ends up "chasing" the object and trying to stop the carousel in time to keep it in focus.

Don't use a carousel when all items can be displayed effectively in the real estate you've allotted.

Hide navigation when programmatic carousel content requires no scrolling, but when a page contains multiple carousels, one or more of which requires no scrolling, present the same affordances on each but deactivate (gray out) the scrolling mechanism on the static carousel(s).

An alternative way of showing variety is to present a different set of featured items each time a page refreshes.

Carousels are not suited for side-by-side comparisons, especially when all items can't be displayed at once. For this, use a data table.

Pattern Gallery

See the Carousel pattern gallery on Flickr.