The carousel allows the user to browse 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 is similar to browsing through the pages of a book.

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

The carousel control is best used for browsing through a set of images. Viewing images one by one helps users to distinguish between different items. However, the carousel is not limited to displaying images; it can contain any 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 are uniform.
• The items you want to display need to be visible at the same time.

Responsiveness

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

On non-touch devices, the user can navigate with Previous and Next icons displayed on the left and right of the control.

On touch devices, the carousel control makes use of the swipe gesture to navigate through the items. As a result, Previous and Next icons are not displayed on touch devices.

The paging indicator (when activated) shows on all form factors. The paging indicator wraps if it is too long to fit onto one line.

Layout

The main component of the carousel control is the content area in which the different items are displayed.

The (optional) paging indicator can float above or below the content area.

On non-touch devices, icons for navigating to the next or previous item either float above the left and right sides of the content area, or appear in the paging indicator area. This is controlled by the arrowsPlacement property.

Behavior and Interaction

The current item is displayed in the content area.

Navigating

When the user navigates from the current item to another item, the current item is moved out of the content area, and the next or previous item slides in (depending on the direction of navigation).

On touch devices, users navigate with swipe gestures (swipe right or swipe left).

On non-touch devices, users navigate with icons.

If the item set contains only one item, 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).

If there are more than 8 pages, the paging indicator changes from icons to numbers.

Resources

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