104Get started
HextaUI

Carousel: Several per view

Items set their own basis. Gutters come from the spacing prop, so they stay exact at any basis.

1
2
3
4
5
6
7
8
9
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export function CarouselSeveralPerView() {
  return (
    <div className="w-full max-w-md px-12">
      <Carousel spacing="sm" aria-label="Several per view">
        <CarouselContent>
          {Array.from({ length: 9 }, (_, index) => (
            <CarouselItem key={index} className="basis-1/2 sm:basis-1/3">
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-3xl font-semibold">
                {index + 1}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Add this example

This adds the example as components/examples/carousel/several-per-view.tsx, together with the Carousel component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel-several-per-view.json

To add only the component, follow the Carousel installation.

Props in this example

The Carousel props this example sets, from the API reference.

Carousel

PropTypeDefault
spacingGap between slides.
"none" | "sm" | "default" | "lg""default"

Every prop is in the Carousel API reference.

More Carousel examples

See them all, with keyboard support and accessibility notes, on the Carousel page.

Related components