The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. There are several ways to perform navigation:
on desktop - the user can navigate using the navigation arrows or with keyboard shorcuts.
on mobile - the user can use swipe gestures.
Usage
When to use:
The items you want to display are very different from each other.
You want to display the items one after the other.
When not to use:
The items you want to display need to be visible at the same time.
The items you want to display are uniform and very similar.
Keyboard Handling
Basic Navigation
When the ui5-carousel is focused the user can navigate between the items with the following keyboard shortcuts:
CSS Shadow Parts
CSS Shadow Parts allow developers to style elements inside the Shadow DOM. The ui5-carousel exposes the following CSS Shadow Parts:
content - Used to style the content of the component
*
Fast Navigation
This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
[UP/DOWN] - Navigates to previous and next item
[LEFT/RIGHT] - Navigates to previous and next item
ES6 Module Import
import "@ui5/webcomponents/dist/Carousel.js";
Properties/Attributes
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Name
Type
Default Value
Description
arrowsPlacement
arrows-placement
CarouselArrowsPlacement
"Content"
Defines the position of arrows.
Available options are:
Content
Navigation
When set to "Content", the arrows are placed on the sides of the current page. When set to "Navigation", the arrows are placed on the sides of the page indicator.
cyclic
boolean
false
Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
hideNavigationArrows
hide-navigation-arrows
boolean
false
Defines the visibility of the navigation arrows. If set to true the navigation arrows will be hidden.
Note: The navigation arrows are never displayed on touch devices. In this case, the user can swipe to navigate through the items.
since v1.0.0-rc.15
hidePageIndicator
hide-page-indicator
boolean
false
Defines the visibility of the page indicator. If set to true the page indicator will be hidden.
since v1.0.0-rc.15
itemsPerPageL
items-per-page-l
Integer
1
Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
itemsPerPageM
items-per-page-m
Integer
1
Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
itemsPerPageS
items-per-page-s
Integer
1
Defines the number of items per page on small size (up to 640px). One item per page shown by default.
pageIndicatorStyle
page-indicator-style
CarouselPageIndicatorStyle
"Default"
Defines the style of the page indicator. Available options are:
Default - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
Numeric - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
since v1.10
Slots
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Slot
Type
Description
default
HTMLElement [0..n]
Defines the content of the component.
Events
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Name
Description
navigate
Fired whenever the page changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the items-per-page-l, items-per-page-m and items-per-page-s properties.
since v1.0.0-rc.7
selectedIndex
type: Integer description: the current selected index
Methods
This Web Component exposes public methods. You can invoke them directly on the Web Component instance.
Name
Description
navigateTo
Changes the currently displayed page.
itemIndex
type: Integer description: The index of the target page
Theme:Morning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteQuartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast White
