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 heading="Activities" subheading="For Today" class="medium">
			<ui5-timeline>
				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-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 heading="David Willams" subheading="Sales Manager" class="small">
			<img src="../../../assets/images/avatars/man_avatar_1.png" slot="avatar" />

			<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 heading="Team Dolphins" subheading="Direct Reports" status="1 of 2" class="medium">
			<ui5-icon name="group" slot="avatar"></ui5-icon>

			<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 heading="Team Bears" header-interactive subheading="Direct Reports" status="2 of 2" class="medium">
			<ui5-icon name="group" slot="avatar"></ui5-icon>

			<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, SelectedIndex and Cyclic

Landscape 1 Landscape 2 Bulb
<ui5-carousel arrows-placement="Navigation" selected-index="2" 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 by swiping right or left. The component is mostly used for showing a gallery of images, but can hold any other HTML element.

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 For the ui5-carousel

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.
hideNavigation
hide-navigation
boolean
false
If set to true the navigation is hidden.
infiniteScrollOffset
infinite-scroll-offset
Integer
1
Defines when the load-more event is thrown. If not applied the event will not be thrown.
since v1.0.0-rc.8
itemsPerPageL
items-per-page-l
Integer
1
Sets 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
Sets 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
Sets the number of items per page on small size (up to 640px). One item per page shown by default.
selectedIndex
selected-index
Integer
0
Defines the index of the initially selected item.

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 ui5-carousel.

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
load-more
Fired for the last items of the ui5-carousel if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is thrown is controlled by the infiniteScrollOffset property.
since v1.0.0-rc.8
navigate
Fired whenever the selectedIndex 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 selectedIndex.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel