Carousel

v1.0.0-rc.6
@ui5/webcomponents
<ui5-carousel>

Carousel With Single Item per Page

Landscape 1 Landscape 2 Bulb
<ui5-carousel>
	<img src="../../../assets/images/sample1.jpg" alt="Landscape 1">
	<img src="../../../assets/images/sample2.jpg" alt="Landscape 2">
	<img src="../../../assets/images/sample3.jpg" alt="Bulb">
</ui5-carousel>
	

Carousel With Multiple Items per Page

MR SOF02 2.43 Online meeting Personal Development Finance Communications Skills
Alain Chevalier Monique Legrand Michael Adams
Richard Wilson Elena Petrova John Miller
<ui5-carousel items-per-page-s="1" items-per-page-m="2" items-per-page-l="2">
	<ui5-card class="medium">
		<ui5-card-header
			slot="header"
			title-text="Activities"
			subtitle-text="For Today"
		></ui5-card-header>

		<ui5-timeline>
			<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
			<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
				MR SOF02 2.43
			</ui5-timeline-item>
			<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="calendar">
				Online meeting
			</ui5-timeline-item>
		</ui5-timeline>
	</ui5-card>

	<ui5-card class="small">
		<ui5-card-header
			slot="header"
			title-text="David Willams"
			subtitle-text="Sales Manager"
		>
			<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />
		</ui5-card-header>

		<ui5-list separators="Inner" class="content-padding">
			<ui5-li icon="competitor" icon-end>Personal Development</ui5-li>
			<ui5-li icon="wallet" icon-end>Finance</ui5-li>
			<ui5-li icon="collaborate" icon-end>Communications Skills</ui5-li>
		</ui5-list>
	</ui5-card>

	<ui5-card class="medium">
		<ui5-card-header
			slot="header"
			title-text="Team Dolphins"
			subtitle-text="Direct Reports"
			status="1 of 2"
		>
			<ui5-icon name="group" slot="avatar"></ui5-icon>
		</ui5-card-header>

		<div class="card-content">
			<ui5-list separators="None" class="card-content-child" style="width: 100%">
				<ui5-li image="../../../assets/images/avatars/man_avatar_1.png" description="User Researcher">Alain Chevalier</ui5-li>
				<ui5-li image="../../../assets/images/avatars/woman_avatar_1.png" description="Artist">Monique Legrand</ui5-li>
				<ui5-li image="../../../assets/images/avatars/woman_avatar_2.png" description="UX Specialist">Michael Adams</ui5-li>
			</ui5-list>
		</div>
	</ui5-card>

	<ui5-card class="medium">
		<ui5-card-header
			slot="header"
			title-text="Team Bears"
			subtitle-text="Direct Reports"
			interactive
			status="2 of 2">
				<ui5-icon name="group" slot="avatar"></ui5-icon>
		</ui5-card-header>

		<div class="card-content">
			<ui5-list separators="None" class="card-content-child" style="width: 100%">
				<ui5-li image="../../../assets/images/avatars/man_avatar_2.png" description="Software Architect">Richard Wilson</ui5-li>
				<ui5-li image="../../../assets/images/avatars/woman_avatar_3.png" description="Visual Designer">Elena Petrova</ui5-li>
				<ui5-li image="../../../assets/images/avatars/man_avatar_3.png" description="Quality Specialist">John Miller</ui5-li>
			</ui5-list>
		</div>
	</ui5-card>
</ui5-carousel>
	

Carousel With Arrow Placement and Cyclic

Landscape 1 Landscape 2 Bulb
<ui5-carousel arrows-placement="Navigation" cyclic>
	<img src="../../../assets/images/sample1.jpg" alt="Landscape 1">
	<img src="../../../assets/images/sample2.jpg" alt="Landscape 2">
	<img src="../../../assets/images/sample3.jpg" alt="Bulb">
</ui5-carousel>
	

Overview

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

When the ui5-carousel is focused the user can navigate between the items with the following keyboard shortcuts:
  • [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 paging 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.

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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel