⚠️ ThumbnailsHeroContentContainer & ThumbnailsHeroContent are deprecated in SWAN v3.3
ThumbnailsHero is only used on PDPs and used without the content block. Remove any content and use only an image.
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
ThumbnailsHero is only available as a React component and is not available in the Vanilla API.
The preview has been updated.
Use ThumbnailsHeroVideoThumbnailSlide instead of CarouselSlide to display a "play" icon over the thumbnail image for slides containing video content.
The preview has been updated.
Use currentSlide to programmatically select a specific slide by providing the slide's index as the prop value. This method directly sets the active slide in the carousel.
Initially, ThumbnailsHero renders with the selected slide already chosen. When the currentSlide prop changes, it triggers a re-render, and the carousel animates towards the newly selected slide.
Use onSlideChange to track changes to the current slide, which can occur through user actions like clicking a thumbnail or swiping.
ThumbnailsHero uses the react-slick library under the hood, which doesn't allow to controlling the state of the carousel.
Due to these limitations, a React state can’t be the single source of truth for the selected slide in the carousel. While the slide can be programmatically altered using the currentSlide prop, user interactions like clicking or swiping will also change the slide.
In that sense, the onSlideChange prop is intended to be notified when a slide is changed, however overriding this change is not possible.
The preview has been updated.
Within ThumbnailsHeroThumbnailsSlidesContainer, use CarouselSlide or ThumbnailsHeroVideoThumbnailSlide with a square Fluid Image to display the thumbnail of an image or a video.
Within ThumbnailsHeroImagesSlidesContainer, use CarouselSlide to display the corresponding large Fluid Image or video.
Within ThumbnailsHeroBackgroundContainer, use the same first large Fluid Image as for ThumbnailsHeroImagesSlidesContainer as a placeholder to ensure visually seamless loading of the carousel.
Use accessibleTextForDots to provide accessible text for slide controllers.
ThumbnailsHeroContentContainer. Large images may get zoomed, clipped, or scaled to match.accessibleTextForDots.<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 |
|---|---|---|---|---|
| accessibleTextForDots | string[] | true | Provide accessible text for slide controllers | null |
| currentSlide | number | null | false | The index of the slide to select | null |
| onSlideChange | ((currentIndex: number, targetIndex: number) => void) | null | false | A callback fired when the ThumbnailsHero changes the selected slide.
It is passed the index of the currently selected slide and the index of the slide it will change to | 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.<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.<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.<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.<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.
