Carousel

Carousels allow the user to browse a set of similar items. They can be used to reduce the amount of vertical space taken by a set of items, but should only be used in this manner when its content can be grouped into a coherent category.

Web

When to Use

Carousels can be a useful pattern when featuring items, such as app recommendation, because it is an inherently visual format. A visual indicator at the base of the carousel reveals the number of items in the set and the user’s position within it. Avoid using carousels for non-visual mediums, such as text-based content. Additionally, avoid using Carousels to display more than seven items.

Appearance & Behavior

Regular Carousel

CarouselBasic

The basic, out-of-the-box Carousel. You can totally do better.

page-elements-carousels-02

A featured app Carousel allows users to start a free trial or bookmark it for later.

Extended Carousel

  • Selected thumbnail and image is 100% while unselected thumbnail is 40% in opacity.
  • On hover and click, the thumbnail becomes 80% in opacity.
  • Clicking on the carousel arrow shows the next set of thumbnails.

Example of a an extended carousel

  • Created by
  • Last modified July 31, 2015 by Dexx Dorris
© Intuit 2016 | Terms of use