MR SOF02 2.43
Personal DevelopmentFinanceCommunications Skills
Alain ChevalierMonique LegrandMichael Adams
Richard WilsonElena PetrovaJohn Miller
Carousel With Arrow Placement and Cyclic
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.
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.
When the ui5-carousel is focused the user can navigate between the items with the following keyboard shortcuts:
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
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.
Defines the position of arrows.
Available options are:
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.
Defines whether the carousel should loop, i.e show the first page after the last page is reached and vice versa.
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.
Defines the visibility of the paging indicator. If set to true the page indicator will be hidden.
Defines the number of items per page on large size (more than 1024px). One item per page shown by default.
Defines the number of items per page on medium size (from 640px to 1024px). One item per page shown by default.
Defines the number of items per page on small size (up to 640px). One item per page shown by default.
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.
Defines the content of the component.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
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.
type: Integer description: the current selected index
This Web Component exposes public methods. You can invoke them directly on the Web Component instance.
Changes the currently displayed page.
type: Integer description: The index of the target page
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast WhiteHorizon