CarouselSlide
Containers

CarouselSlide

One slide of a Carousel. Width comes from the carousel; height comes from the content.

Props

CarouselSlide extends HTMLAttributes<HTMLDivElement> and takes no props of its own. Width comes from the carousel's perView, and the snap point is set on the wrapper the carousel puts around it, so a slide can contain any component.

CarouselSlideProps props
PropTypeDefaultDescription
childrenReactNode—The slide's content.

Slides stretch to the height of the tallest one in view because the track is a flex row. Give the content height: 100% to fill that space instead of sitting at the top of it.

Examples

Uneven content

CarouselSlide heights
ImportTSX
import { Carousel, CarouselSlide } from "@solarius/onset";

<Carousel perView={2.5} gap="2">
  {items.map((item) => (
    <CarouselSlide key={item.id}>
      <ItemCard item={item} />
    </CarouselSlide>
  ))}
</Carousel>;

See Carousel for the track, the controls, and the keyboard behavior.