CarouselGallery

Renders a horizontally-scrolling strip of thumbnail buttons for carousel navigation.

Renders a horizontally-scrolling strip of thumbnail buttons for carousel navigation with automatic scroll positioning.

Usage

import { Carousel, CarouselGallery } from '@accelint/design-toolkit';

export function Gallery({ items, position, setPosition }) {
  return (
    <Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
      <CarouselGallery />
    </Carousel>
  );
}

Reference

interface CarouselGalleryProps extends HTMLAttributes<HTMLDivElement> {
  classNames?: {
    container?: string;
    item?: string;
  };
}

Props

Prop	Type	Default	Required
`classNames`	`{ container?: string; item?: string }`	-	No
`className`	`string`	-	No

`classNames.container`

Class name applied to the gallery container element.

`classNames.item`

Class name applied to individual thumbnail button elements.

Behavior

The gallery automatically scrolls to keep the selected thumbnail visible, maintaining 2 items before the selected item when possible for visual context.

Clicking any thumbnail navigates the carousel to that item by calling setCurrentPosition with the item's index.

Examples

Example: Basic gallery

import { Carousel, CarouselGallery, CarouselViewer } from '@accelint/design-toolkit';

<Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
  <CarouselViewer />
  <CarouselGallery />
</Carousel>

Example: Custom styled gallery

import { Carousel, CarouselGallery } from '@accelint/design-toolkit';

<Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
  <CarouselGallery
    classNames={{
      container: 'py-4 gap-2',
      item: 'rounded-lg border-2'
    }}
  />
</Carousel>

import {
  Carousel,
  CarouselViewer,
  CarouselGallery,
  CarouselPrevious,
  CarouselNext
} from '@accelint/design-toolkit';

<Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
  <CarouselViewer />
  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
    <CarouselPrevious />
    <CarouselGallery />
    <CarouselNext />
  </div>
</Carousel>

Good to know: Gallery thumbnails use ToggleButton components internally, providing visual feedback for the selected state and keyboard accessibility.

Carousel - Parent carousel component
ToggleButton - Button component used for thumbnails