Carousel is only available in the React API for SWAN.
Use Carousel...
- In non-hero spots on the page, as a secondary element to showcase products or related content.
- To display a series of content when space is limited.
- To showcase a limited number of slides (2-4) to ensure user engagement and recall.
Don't use Carousel...
- In a hero spot (a wide banner at the top of the page), as it leads to significantly lower engagement beyond the first slide.
- To display SEO-relevant information, as search engines cannot index content that requires user interaction to view.
Default
The preview has been updated.
ShareSkin
Full
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.
Promo-bar
Use skin="promo-bar" to wrap a "promo bar" in a Carousel.
The preview has been updated.
Peek
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.
Slides to show
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.
Grid Gutters
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.
Arrows
Visibility
Use arrows={false} to hide the arrows.
Note: if the arrows are hidden, provide navigation through the Progress Indicator.
The preview has been updated.
Positioning
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.
- Use
arrowVerticalPositionto adjust the arrows' vertical positioning. e.g.,arrowVerticalPosition="50px"vertically centers the arrows 50px from the top of the Carousel. - Use
arrowVerticalOffsetto shift arrows by a specified amount. e.g.,arrowVerticalOffset="-40px"places the arrows 40px higher than the default.
The preview has been updated.
Finite
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.
Progress Indicator
Dots
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.
Dots inset
Use progressIndicator="dots-inset" to make the dots overlap the content.
The preview has been updated.
Alignment
Use progressIndicatorAlignment="left" to make the dots left-aligned instead of centered.
The preview has been updated.
Accessibility
Autoplay
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.
Implementation
Server-side rendering
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.