Component | Thumbnails Hero

styleKeysthumbnailsHerostyleKeyscarousel

Develop

ThumbnailsHero is only available as a React component and is not available in the vanilla JS API.

On the technical side, it consists of four children:

ThumbnailsHeroThumbnailsContainer, which holds a set of CarouselSlide components. Each slide should hold a square thumbnail image that is a FluidImage.
ThumbnailsHeroImagesContainer, a second set of CarouselSlide components. Each slide should hold a large image that is a FluidImage.
ThumbnailsHeroBackgroundContainer, which holds a single large placeholder image that will be shown while the image carousels load. Typical usage is to have this match the first large image, so that the loading is visually seamless.
ThumbnailsHeroContentContainer, a wrapper for ThumbnailsHeroContent, which can be any content you'd like.

<ThumbnailsHero>
  <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>

  <ThumbnailsHeroContentContainer>
    <ThumbnailsHeroContent>Hero content goes here</ThumbnailsHeroContent>
  </ThumbnailsHeroContentContainer>
</ThumbnailsHero>

You can change the width of the content area via the contentWidth prop:

<ThumbnailsHero contentWidth="wide"></ThumbnailsHero>

Besides the default look, there is one skin, "under", that places the thumbnails under the hero rather than on top of it. This skin also sets a fixed height for the hero images, and allows the content box to grow taller than the hero image.

ThumbnailsHero uses the react-slick library under the hood, which doesn't allow us to control the state of the carousel.
The implications of this is that we can't have a piece of React state be the single source of truth for the selected slide in the carousel, we can programmatically change the slide with the currentSlide prop, but users can also interact with the carousel (via clicking or swiping) which would also change the slide.
Bear in mind then, that the onSlideChange prop is intended to be notified when a slide is changed, but you can't override the change.

You can programmatically change which slide is selected via the currentSlide prop. It accepts the index of the slide to select.

On first render, the ThumbnailsHero will render with the chosen slide already selected. On re-renders triggered by changing the currentSlide prop, the carousels will animate towards the newly selected slide.

Since the selected slide can also be changed by clicking on a thumbnail or by swiping, you can subscribe to the state of the currently selected slide via the onSlideChange prop.

The thumbnails must be square, and will be displayed at a pre-set height and width of 64px. The thumbnail will be scaled down as needed.
The overall height of the Hero will be determined by the height of the ThumbnailsHeroContentContainer. The large images may get zoomed, clipped, or scaled to match.
The content box has no styling of its own, and no padding. The consuming page can style the contents as it sees fit.

ThumbnailsHero

Prop	Type	Default	Description
skin	"standard" \| "under"	standard	The visual style of the thumbnails hero
contentWidth	"standard" \| "wide"	standard	The width of the content area
currentSlide	number		The index of the slide to select
onSlideChange	(currentIndex: number, targetIndex: number) => void		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

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)