Carousel is only available in the React API for SWAN.
Some props/prop values deprecated in SWAN v3.14
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
The preview has been updated.
Use skin="full" to indent the arrows on top of the slides and clip to the limits of the Carousel.
The preview has been updated.
Use skin="promo-bar" to wrap a "promo bar" in a Carousel.
The preview has been updated.
Use peek with an infinitely-scrolling Carousel to make previous/next slides "peek" out from both edges, to show that there are more slides.
Note: the peek feature expects that you are using a Carousel with infinite scrolling. Setting the infinite prop to false will break the Carousel if peek is also true. If you need a Carousel that is finite, but also shows a peek of adjacent slides, set slidesToShow to a non-integer value such as 1.2; see below.
The preview has been updated.
Use slidesToShow with multiple values for different screen sizes, such as {{xs: 2, lg: 6}}. This feature works with server-side rendering and will not have a flicker when JavaScript kicks in (which was not the case in SWAN 2 or earlier).
The preview has been updated.
Use slidesToShow with a decimal value to create a peek effect on the right edge.
The preview has been updated.
gridGutters is deprecated in SWAN v3.14
As it is rarely used, it has been deprecated to improve consistency for customers and to maintain consistency with GridContainer and reduce UX debt.
Use gridGutters to place gutters (gaps) between each slide. These gutters will match the width of the gutters on the layout Grid, so your slides will appear to be on the grid.
When using the gridGutters prop, slides should have rounded corners. StandardTile already has rounded corners, but for plain images or other content, wrap your slide contents in a Card component with fullBleed and overflow="hidden".
The preview has been updated.
Use a custom padding around each slide, using Space, to achieve a spacing different from the gridGutters: be aware that it will create a left and right inner indent, and the content won't look "on the grid" anymore.
The preview has been updated.
Use arrows={false} to hide the arrows.
Note: if the arrows are hidden, provide navigation through the Progress Indicator.
The preview has been updated.
Arrows are centered vertically by default, using the total height of the Carousel.
When displaying content such as product tiles, arrows may appear visually misaligned.
arrowVerticalPosition to adjust the arrows' vertical positioning. e.g., arrowVerticalPosition="50px" vertically centers the arrows 50px from the top of the Carousel.arrowVerticalOffset to shift arrows by a specified amount. e.g., arrowVerticalOffset="-40px" places the arrows 40px higher than the default.The preview has been updated.
Use infinite={false} to provide a finite Carousel. By default, a Carousel will scroll infinitely. The arrow will be disabled at the end of a scroll.
The preview has been updated.
Use the progressIndicator to add dots that indicate the active slide and the total number of slides.
When using this option, you must provide the prop accessibleTextForDots to the Carousel.
The preview has been updated.
Use progressIndicator="dots-inset" to make the dots overlap the content.
The preview has been updated.
Use progressIndicatorAlignment="left" to make the dots left-aligned instead of centered.
The preview has been updated.
Carousels should have a text label that describes what the carousel contains. If a nearby element acts as that label, its id should be associated with the carousel using the aria-labelledby prop. Otherwise, provide an aria-label prop with a value like "Recommended Products"
All carousels require an aria-roledescription prop with a localized value of "carousel" to correctly notify assistive technology about the behavior of the component. Similarly, all slides should have an aria-roledescription of a localized value of "slide"
Screenreaders need to be notified when the visible slides of a carousel have changed, and what slides those are. All carousels require a localized value for accessibleTextForVisibleSlides. It should contain a localize value of the string "Slide {activeSlides} of {totalSlides}", with those exact placeholders.
Any carousel that auto-advances needs to have controls to let the user pause it. Until SWAN is able to add this feature, autoplay is not supported.
Carousel uses JavaScript extensively for its layout, so when adjusting Carousel props by screen size, be mindful of the limitations of our Responsive System with SSR.
Carousel is built with react-slick, which offers props such as beforeChange, afterChange, and onInit for tracking interactions.
The preview has been updated.
SWAN's Carousel is built on top of the react-slick third-party component. See the Slick documentation for full prop descriptions.
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| aria-label | string | false | Defines a string value that labels the current element.
Provide distinct label for the slide.
As an alternative, number and set size can serve as a meaningful label. eg "3 of 10"
@see aria-labelledby. | null |
| aria-labelledby | string | false | Identifies the element (or elements) that labels the current element.
References of the element that labels the slide.
@see aria-describedby. | null |
| aria-roledescription | string | false | Defines a human-readable, author-localized description for the role of an element.
Localized label for assistive tech to identify this element as a "slide" | slide |
<div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| slidesToShow | Responsive<number> | false | The number of slides to show at a time. | 1 |
| role | AriaRole | false | ARIA role for the Carousel component. | region |
| skin | "standard" | "full" | "promo-bar" | null | false | The visual style of the Carousel.
One of: "standard", "full", "promo-bar". | standard |
| progressIndicator | "none" | "dots" | "dots-inset" | null | false | Specifies the way that slide-progress is indicated to the user.
One of: "none", "dots", "dots-inset". | none |
| progressIndicatorAlignment | "center" | "left" | null | false | Specifies the alignment of the progress indicator.
One of: "left", "center". | center |
| peek | boolean | null | false | Whether to show a peek of the next slide. | false |
| gridGutters | boolean | null | false | Whether to place gutters between the slides that match the grid's gutters. | false |
| gridGuttersVariant | string | null | false | ⚠️ Deprecated - This is deprecated without a replacement.
What kind of gutters to place between slides. | standard |
| arrowVerticalPosition | string | null | false | The vertical position of the arrows, as a CSS "top" property. | null |
| arrowVerticalOffset | string | null | false | The vertical offset of the arrows, relative to its CSS "top" property. | 0px |
| accessibleTextForPrevious | string | true | Set accessible text for previous` button. | null |
| accessibleTextForNext | string | true | Set accessible text for next button. | null |
| currentSlide | number | null | false | The current slide of the carousel. | null |
| accessibleTextForVisibleSlides | string | null | false | Localized text to be used in the aria-live region.
Should utilise placeholders {activeSlides} and {totalSlides} e.g. "Slide {activeSlides} of {totalSlides}" | Slide {activeSlides} of {totalSlides} |
| accessibleTextForDots | string[] | false | Localized Accessible text for carousel dots. | null |
| id | string | false | Set a unique id to the carousel | null |
How does Carousel meet your needs?