Skip to main content

Usage modes

Simple + Composable Modes​

BlazeSlider simple mode​

When each slide is the same shape and you want minimum boilerplate:

<BlazeSlider
  slidesToShow={2}
  slidesToScroll={2}
  breakpoints={{
    '(min-width: 1024px)': { slidesToShow: 5, slidesToScroll: 5 },
  }}
  slides={products}
  slideRenderer={(product, idx) => <ProductCard {...product} />}
  buttonProps={{ chevronSize: 24 }}
/>

BlazeSlider renders BlazeTrack, BlazeSlide, and BlazeButton internally. Forward per-element props via buttonProps, trackProps, and slideProps. slideRenderer does not receive isVisible in this mode — if you need it, drop into composable mode.

BlazeSlider composable mode​

When you need control over what sits between the buttons and the track, or want to read context yourself:

<BlazeSlider slidesToShow={5} loop>
  <BlazeButton direction="prev" />
  <BlazeTrack>
    <BlazeSlide index={0}>...</BlazeSlide>
    <BlazeSlide index={1}>...</BlazeSlide>
  </BlazeTrack>
  <BlazeButton direction="next" />
</BlazeSlider>

BlazeTrack renderer mode​

A sub-mode of composable that handles the most common pattern (mapping items → slides + reading visibleIndices) without forcing every caller to write an inner component just to read context.

<BlazeSlider slidesToShow={5} loop>
  <BlazeButton direction="prev" />
  <BlazeTrack
    items={products}
    getSlideKey={(item, idx) => `${item.handle ?? idx}`}
    slideProps={{ className: 'optional-per-slide-classes' }}
    slideRenderer={(item, idx, isVisible) => (
      <ProductCard {...item} tabIndex={isVisible ? 0 : -1} />
    )}
  />
  <BlazeButton direction="next" />
</BlazeSlider>

The renderer's isVisible argument is visibleIndices.has(idx) resolved on the caller's behalf. Use this whenever the slide content cares about its own visibility (focus management, lazy media, etc.).

Why the inner-component pattern existed before​

<BlazeSlider> provides BlazeSlideContext. React's useContext only finds providers that are ancestors, so the same component that renders <BlazeSlider> cannot read its context — it's the parent of the Provider, not a descendant. Pre-renderer-mode, callers had to wrap the slide-mapping logic in a child component (<ProductCarouselSlides>, <TabbedSlides>, etc.) just to be inside the provider boundary. BlazeTrack's renderer mode hoists that read into the library so callers don't need the wrapper.