This component requires internationalisation (i18n) to be set up in your application.
AdaptiveCarousel is only available in the React API for SWAN.
This component is intended to replace Carousel and Thumbnails Hero. In SWAN V4, Adaptive Carousel will be renamed to Carousel.
The preview has been updated.
Carousel slides are empty, flexible containers that can hold any content. Most commonly, this is promotional content using Standard Tiles or components created from Base Tile, but it can also include Cards, Buttons, images, and videos.
Nesting an Adaptive Carousel inside another is not recommended.
Use slidesToShow to define how many slides are visible. You can set different values for Responsive System breakpoints, for example {{ xs: 2, md: 6 }}. Decimal values are not supported and will be rounded down.
The preview has been updated.
The preview has been updated.
Use alignSelf to adjust a slide’s vertical alignment. Use alignSelf="stretch" to make a slide fill the Carousel’s height, or alignSelf="center" to center it vertically." When using Standard Tile, combine this with StandardTileFooter. When using components created using Base Tile, combine this with the evenHeight prop.
The preview has been updated.
Controls adapt to the carousel size. By default, Slide Navigation Buttons are visible. When the component is narrower than 480px, Slide Picker dots appear, and Slide Navigation buttons show only on hover.
The preview has been updated.
Slide Navigation Buttons automatically align vertically to the center of images when slides use Standard Tile or Tiles created from Base Tile. Otherwise, they align vertically to the center of the slide height.
Figma tip: Align arrows by setting the Adaptive Carousel height equal to the image height. Example.
The preview has been updated.
Use slidePicker with AdaptiveCarouselSlidePickerThumbnails to add Slide Picker Thumbnails. Use AdaptiveCarouselSlidePickerThumbnail to contain each thumbnail image. Use video to indicate that a slide contains video content.
This is recommended only when slidesToShow={1}.
The preview has been updated.
Use onSlideChange to run side effects when the active slide changes, such as tracking metrics
Use AdaptiveCarouselImage when the slide content is an image.
The preview has been updated.
Use aspectRatio set the image’s aspect ratio. Passing an aspect ratio will also reserve space for the image while loading, preventing a layout shift.
The preview has been updated.
Use objectFit to control how the image fills its container and objectPosition to set the image’s position within the container.
The preview has been updated.
<section /> as the root element. You can utilize the native attributes supported by <section /> 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.
@see aria-labelledby. | null |
| aria-labelledby | string | false | Identifies the element (or elements) that labels the current element.
@see aria-describedby. | null |
| onSlideChange | ((firstSlideIndex: number, lastSlideIndex: number) => void) | false | Callback for executing side effects, such as metrics | null |
| slidePicker | ReactNode | false | Accepts an AdaptiveCarouselSlidePickerThumbnails containing an equal amount of thumbnails for slides. | 'standard' |
| slidesToShow | Responsive<number> | false | Rounded down to nearest whole number.
Default value depends on what other props are passed. | null |
| skin | "standard" | "promo-bar" | false | `promo-bar` skin should only be used by the Merchandising Components team, controlled via Contentful. | 'standard' |
<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 |
|---|---|---|---|---|
| active | boolean | false | Should be passed internally | null |
| alignSelf | AlignSelf | false | Overrides the flex item's `align-items` value on an individual slide basis. | 'start' |
<img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| alt | string | false | - | '' |
| aspectRatio | AspectRatio | false | - | null |
| objectFit | ObjectFit | false | - | null |
| objectPosition | ObjectPosition<0 | (string & {})> | false | - | null |
<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.<button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.| prop | type | required | description | default |
|---|---|---|---|---|
| index | number | false | Should be passed internally | null |
| video | boolean | false | Should be set to `true` if the thumbnail represents a video | null |
How does Adaptive Carousel meet your needs?