The carousel is a control for browsing through a set of items. It always displays one item at a time. From the displayed item, the user can navigate to either the next or the previous item. The interaction resembles browsing through the pages of a book.

Optionally, a paging indicator displays the user’s current position inside the set of items.

The control is best known for browsing through a set of images, as it works best when the single items are represented in a way that the user can easily distinguish. Nonetheless, the carousel is not limited to displaying images; it can contain every sap.m control.

Usage

Use the carousel if:

• You have strong visual representations of the items you want to display.
• You want to display the items one after the other.

Do not use the carousel if:

• The items you want to display need to be visible at the same time.
• The items you want to display are uniform.

Responsiveness

The size of the control’s content area is automatically adjusted to the amount of space available.

When used in non-touch mode, the user can navigate with forward and backward icons displayed on the left and right side of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. Therefore, the forward and backward icons are not displayed on touch devices.

The paging indicator (when activated) is visible on each form factor. The paging indicator wraps if not all items fit in one line.

Layout

The carousel control mainly consists of a content area in which the different items are displayed and cycled through.

Optionally, a paging indicator can be displayed floating either above the top or at the bottom of the content area.

On non-touch devices, icons for navigating to the next or previous item are displayed floating above the left and right side of the content area.

Behavior and Interaction

The current item is displayed in the content area.

Navigating

When the user navigates from a displayed item to another item, the item is moved out of the content area and the next or previous item (depending on the direction of navigation) appears with a sliding transition.

On touch devices, navigation is performed with swipe gestures (swipe right or swipe left).

On non-touch devices, navigation is provided by icons.

When the item set contains only one item, the navigation is deactivated.

Looping

The carousel can be set to loop (property: loop). In this case, the carousel jumps back to the first item once all items have been displayed. If looping is not enabled, there is no forward navigation on the last item.

Paging

The current position inside the set of items is displayed using an optional paging indicator (properties: showPageIndicator, pageIndicatorPlacement).

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.