Last updated: September 11, 2015 at 19:11 pm

Carousel interactions permit users to browse through a fixed set of items, displaying one at a time. Items are normally images, but can also be text or a combination of the two.

Visual example of the element:

What problem does this element or pattern solve?
Another way of displaying multiple content elements within the same space is a carousel. One item or set of items is displayed at a time. The interaction controls often double as visual cues to indicate the total number of items in the set, the current items being displayed, and if the user is moving forward or backward with the set. Carousels can display images, text, or a combination of the two.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

• Do you have a limit on the number of items that can be included in a carousel?

• What are the visual cues for the number of items in the set? Will you use thumbnail graphics of each image? Simple graphic shapes? If one of these visual cues are clicked, is the corresponding image immediately displayed?

• On the visual cues, how will you indicate the current image being displayed?

• Will your carousel automatically rotate through the items if the user does not interact with the tool? If so, how long is the delay before this rotation starts? If the user does interact, does the automatic rotation stop completely?

• Will you include “previous” or “next” controls? If so, where are they located and how are they styled? When the user reaches the end of the set, will “next” take them back to the start?

Location of assets to build this element or pattern
Location of UX or visual design assets

Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
slider, slideshow, gallery, automatic image slider
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply