Thumbnails Hero

A carousel of large images with thumbnails navigation.

styleKeys: thumbnailsHero

ThumbnailsHero is deprecated in SWAN v3.25.0.

Use AdaptiveCarousel instead, which has improved performance and increased consistency for customers. See Deprecation for more information.

ThumbnailsHero is only available in the React API for SWAN.

UsageGuidelinesAPI

Use Thumbnails Hero...

To display, in a hero spot on Product pages, a series of large images with thumbnails, within a carousel.

Don't use Thumbnails Hero...

On other pages than Product pages or elsewhere within the Product page. Use a Carousel or a Banner instead.

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.

<ThumbnailsHero accessibleTextForDots={['slide1', 'slide 2', 'slide 3']}>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-3.webp" />
    </CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-3.webp" />
    </CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

<ThumbnailsHero accessibleTextForDots={['slide1', 'slide 2', 'slide 3']}>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-3.webp" />
    </CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-3.webp" />
    </CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

Video Slide

Use ThumbnailsHeroVideoThumbnailSlide instead of CarouselSlide to display a "play" icon over the thumbnail image for slides containing video content.

<ThumbnailsHero>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <ThumbnailsHeroVideoThumbnailSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </ThumbnailsHeroVideoThumbnailSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>
      <video loop playsInline autoPlay>
        <source
          src="https://cdn.sanity.io/files/97q9kmih/production-v2/2f1ea758802fe14832bd501e6a4c4bbd7e84d42d.mp4"
          type="video/mp4"
        />
      </video>
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

<ThumbnailsHero>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <ThumbnailsHeroVideoThumbnailSlide>
      <FluidImage src="/example-images/1x1.webp" />
    </ThumbnailsHeroVideoThumbnailSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>
      <video loop playsInline autoPlay>
        <source
          src="https://cdn.sanity.io/files/97q9kmih/production-v2/2f1ea758802fe14832bd501e6a4c4bbd7e84d42d.mp4"
          type="video/mp4"
        />
      </video>
    </CarouselSlide>
    <CarouselSlide>
      <FluidImage src="/example-images/1x1-2.webp" />
    </CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

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.

() => {
  const [slideIndex, setSlideIndex] = React.useState(2)
  return (
    <>
      <label>Change slide to:</label>
      <Dropdown
        value={slideIndex}
        onChange={event => setSlideIndex(event.target.value)}
      >
        <DropdownOption value={0}>t1</DropdownOption>
        <DropdownOption value={1}>t2</DropdownOption>
        <DropdownOption value={2}>t3</DropdownOption>
      </Dropdown>
      <ThumbnailsHero
        currentSlide={slideIndex}
        onSlideChange={(currentIndex, targetIndex) =>
          setSlideIndex(targetIndex)
        }
      >
        <ThumbnailsHeroThumbnailsSlidesContainer>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-2.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-3.webp" />
          </CarouselSlide>
        </ThumbnailsHeroThumbnailsSlidesContainer>
        <ThumbnailsHeroImagesSlidesContainer>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-2.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-3.webp" />
          </CarouselSlide>
        </ThumbnailsHeroImagesSlidesContainer>
        <ThumbnailsHeroBackgroundContainer>
          <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
        </ThumbnailsHeroBackgroundContainer>
      </ThumbnailsHero>
    </>
  )
}

() => {
  const [slideIndex, setSlideIndex] = React.useState(2)
  return (
    <>
      <label>Change slide to:</label>
      <Dropdown
        value={slideIndex}
        onChange={event => setSlideIndex(event.target.value)}
      >
        <DropdownOption value={0}>t1</DropdownOption>
        <DropdownOption value={1}>t2</DropdownOption>
        <DropdownOption value={2}>t3</DropdownOption>
      </Dropdown>
      <ThumbnailsHero
        currentSlide={slideIndex}
        onSlideChange={(currentIndex, targetIndex) =>
          setSlideIndex(targetIndex)
        }
      >
        <ThumbnailsHeroThumbnailsSlidesContainer>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-2.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-3.webp" />
          </CarouselSlide>
        </ThumbnailsHeroThumbnailsSlidesContainer>
        <ThumbnailsHeroImagesSlidesContainer>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-2.webp" />
          </CarouselSlide>
          <CarouselSlide>
            <FluidImage src="/example-images/1x1-3.webp" />
          </CarouselSlide>
        </ThumbnailsHeroImagesSlidesContainer>
        <ThumbnailsHeroBackgroundContainer>
          <FluidImage src="/example-images/1x1.webp" alt="Placeholder" />
        </ThumbnailsHeroBackgroundContainer>
      </ThumbnailsHero>
    </>
  )
}

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.

<ThumbnailsHero accessibleTextForDots={['slide1', 'slide 2', 'slide 3']}>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    /* Fluid Image goes here */
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

<ThumbnailsHero accessibleTextForDots={['slide1', 'slide 2', 'slide 3']}>
  {/* text for accessibleTextForDots to be localized */}
  <ThumbnailsHeroThumbnailsSlidesContainer>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
  </ThumbnailsHeroThumbnailsSlidesContainer>

  <ThumbnailsHeroImagesSlidesContainer>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
    <CarouselSlide>/* Fluid Image goes here */</CarouselSlide>
  </ThumbnailsHeroImagesSlidesContainer>

  <ThumbnailsHeroBackgroundContainer>
    /* Fluid Image goes here */
  </ThumbnailsHeroBackgroundContainer>
</ThumbnailsHero>

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.