CarouselViewer

Displays the full-size media for the currently active carousel item based on its data type (image, video, or audio).

Usage

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

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

Reference

interface CarouselViewerProps extends PropsWithChildren {
  classNames?: {
    container?: string;
    media?: string;
  };
}

Props

Prop	Type	Default	Required
`children`	`React.ReactNode`	-	No
`classNames`	`{ container?: string; media?: string }`	-	No

`children`

Optional overlay content rendered inside the viewer. Useful for positioning controls or metadata over the media.

`classNames.container`

Class name applied to the viewer container element.

`classNames.media`

Class name applied to the displayed media element (img, video, or audio component).

Examples

Example: Basic viewer

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

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

Example: With overlay controls

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

<Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
  <CarouselViewer>
    <div style={{ position: 'absolute', bottom: '1rem', right: '1rem' }}>
      <CarouselPosition />
    </div>
  </CarouselViewer>
</Carousel>

Example: Custom styling

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

<Carousel items={items} currentPosition={position} setCurrentPosition={setPosition}>
  <CarouselViewer
    classNames={{
      container: 'aspect-video bg-gray-900',
      media: 'object-contain'
    }}
  />
</Carousel>

Good to know: CarouselViewer automatically renders the appropriate media element based on the current item's dataType: images use <img>, videos use the Video component, and audio uses the Audio component.

Carousel - Parent carousel component
Video - Video component for video items
Audio - Audio component for audio items

CarouselViewer

On this page