ThumbnailsHero is only available in the React API for SWAN.
Thumbnails Hero
A carousel of large images with thumbnails navigation.
styleKeys: thumbnailsHero
Default
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.
accessibleTextForDots is deprecated in SWAN 3.24. This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system and remove this prop.
The preview has been updated.
Video Slide
Use ThumbnailsHeroVideoThumbnailSlide instead of CarouselSlide to display a "play" icon over the thumbnail image for slides containing video content.
The preview has been updated.
Current slide
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.
Implementation
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.
Accessibility
If you’re not using SWAN’s i18n system, use accessibleTextForDots to provide accessible text for slide controllers.
Content
Image
- Use Thumbnails Hero with Fluid Image.
- Use square images for the thumbnails. They are displayed at a pre-set height and width of 64px: the images are scaled down as needed.
- The height of the Thumbnails Hero is determined by the height of the
ThumbnailsHeroContentContainer. Large images may get zoomed, clipped, or scaled to match.
Text
- Localize each slide title for
accessibleTextForDots.
Props
ThumbnailsHero
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
| prop | type | required | description | default |
|---|---|---|---|---|
| currentSlide | number | null | false | The index of the slide to select | 0 |
| 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 |
| accessibleTextForDots | string[] | false | ⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
Provide accessible text for slide controllers | null |
ThumbnailsHeroContentContainer
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
ThumbnailsHeroContent
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
ThumbnailsHeroImagesSlidesContainer
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
ThumbnailsHeroThumbnailsSlidesContainer
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
ThumbnailsHeroBackgroundContainer
This component is implemented using the
<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.See core props for additional props that can be applied to this component.
How does Thumbnails Hero meet your needs?
Related