Carousel
- HTML/CSS:Dev Ready
- Web Component:True
- Layout:Responsive
Sections
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
About Carousel#
A Carousel can accept a maximum number of 5 panels where only 1 panel is visible at a time.
Accessibility#
A Carousel is built using a tabbed UI specification and requires the following to meet accessibility requirements:
- The tab list, which should have
role="tablist"
- The tabs in that list, which should each be an
<a role="tab">
anchor wrapped in a<li role="presentation">
list item - The tab panels, which display each tab’s content and should each have
role="tabpanel"
Markup#
- Selected tab’s anchor has
aria-selected="true"
, all other tabs’ anchors havearia-selected="false"
- Selected tab’s anchor has
tabindex="0"
, all other tabs havetabindex="-1"
- Each tab’s anchor has an
aria-controls
attribute whose value is the id of the associated<div role="tabpanel">
- Each tab panel has an
aria-labelledby
attribute whose value is the id of its associated<a role="tab">
- Each tab panel has an
aria-hidden
attribute whose value is toggled based on which panel is visible - When the Carousel is set to auto-play, the HTML for the pause button is required to precede the HTML of the tab set
Keyboard Interactions#
- Arrow keys, when focus is on selected tab, cycle selection to the next or previous tab
- Tab key, when focus is before the tab list, moves focus to the selected tab panel
- Tab key, when focus is on selected tabpanel, moves focus into the selected tabpanel's associated tab or to the next focusable element on the page if that panel has no focusable elements
- Shift+Tab keys, when focus is on first element in a tab panel, move focus focus entirely from tabset
Base#
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="false" title="Stop auto-play">
Navigating between panels#
You are able to navigate between panels but interacting with the slds-carousel__indicator
elements that sit below the panel.
Panel 1 active#
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="false" title="Stop auto-play">
Panel 2 active#
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="false" title="Stop auto-play">
<div class="slds-carousel">
<div class="slds-carousel__stage">
<div class="slds-carousel__panels" style="transform:translateX(-100%)">
<div id="content-id-01" class="slds-carousel__panel" aria-hidden="false" role="tabpanel" aria-labelledby="indicator-id-01" tabindex="-1">...</div>
Accessibility
A panel becomes visible by toggling the
aria-hidden
attribute fromfalse
totrue
on theslds-carousel__panel
element. When a panel becomes active, the `tabindex` of the other non-visible panels should be set to -1 while the active panel remains at 0.
When a panel becomes active, apply an inline style to slds-carousel__panel
to move the panels left to right. We do this by updating the location of the panel on its Y axis using transforms. The first panel should be transform: translateX(0%)
but when any preceding panel becomes active it can be subtracted by 100%, moving 100% of each panel to the left. For example, panel 1 would be visible at transform: translateX(0%)
, while panel 3 would be visible at transform: translateX(-200%)
.
When making the slds-carousel__panel
active, the indicator should be updated with the slds-is-active
class. This provides visual feedback showing which carousel panel is active.
Auto-play#
If the Carousel is set to auto-play, a pause button is required to be first in the HTML before the tab set.
Accessibility
When that pause button is interacted with, the
aria-pressed
role needs to be toggled totrue
.
<div class="slds-carousel">
<div class="slds-carousel__stage">
<span class="slds-carousel__autoplay">
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-pressed="true" title="Stop auto-play">
Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-carousel |
---|---|
Summary | Initiates a carousel component |
Support | dev-ready |
Restrict | div |
Variant | True |
Selector | .slds-carousel__stage |
---|---|
Summary | Main stage for carousel's tab-panels and tab-list inidicators |
Restrict | .slds-carousel div |
Selector | .slds-carousel__panels |
---|---|
Summary | Tabpanel region that contains all carousel panels |
Restrict | .slds-carousel__stage div |
Selector | .slds-carousel__panel-action |
---|---|
Summary | Actionable element that contains the carousel's tab-panel content |
Restrict | .slds-carousel__stage a |
Selector | .slds-carousel__image |
---|---|
Summary | Element that contains the image inside the carousel's tab-panel |
Restrict | .slds-carousel__panel-action div |
Selector | .slds-carousel__content |
---|---|
Summary | Element that contains the content inside the carousel's tab-panel |
Restrict | .slds-carousel__panel-action div |
Selector | .slds-carousel__content-title |
---|---|
Summary | Heading element that contains the title of the carousel's tab-panel |
Restrict | .slds-carousel__content h2 |
Selector | .slds-carousel__autoplay |
---|---|
Summary | Element that contains the auto-play button icon to toggle on/off |
Restrict | .slds-carousel__stage span |
Selector | .slds-carousel__indicators |
---|---|
Summary | List element that contains the carousel's tab-list inidicators |
Restrict | .slds-carousel ul |
Selector | .slds-carousel__indicator |
---|---|
Summary | Carousel's tab-list inidicator items |
Restrict | .slds-carousel__indicators li |
Selector | .slds-carousel__indicator-action |
---|---|
Summary | Actionable element inside of each tab-list indicator |
Restrict | .slds-carousel__indicator a |
Selector | .slds-is-active |
---|---|
Summary | Active state notifying the tab that its current panel is active |
Restrict | .slds-carousel__indicator-action |
Carousel Release Notes
2.7.0
Fixed
- Swapped values for
aria-hidden
on Carousel panels.- In previous versions, the
true
andfalse
values foraria-hidden
were inadvertently reversed—aria-hidden: true
was placed on open panels, and vice versa. This has now been updated to use the proper values for open and closed panels.
- In previous versions, the
- Fixed bug that caused Carousel panels to be improperly sized in IE11.