# Carousel: Several per view

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

Example: https://hextaui.com/docs/carousel/examples/several-per-view
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/carousel-several-per-view.json
```

This adds `components/examples/carousel/several-per-view.tsx` with the Carousel component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/carousel/several-per-view.tsx"
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>
  )
}
```

## Props in this example

### Carousel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `spacing` | `"none" \| "sm" \| "default" \| "lg"` | `"default"` | Gap between slides. |

## More Carousel examples

- [API](https://hextaui.com/docs/carousel/examples/api.md)
- [Dots and counter](https://hextaui.com/docs/carousel/examples/dots-and-counter.md)
- [Autoplay](https://hextaui.com/docs/carousel/examples/autoplay.md)
- [Thumbnails](https://hextaui.com/docs/carousel/examples/thumbnails.md)
- [Vertical](https://hextaui.com/docs/carousel/examples/vertical.md)
- [Controlled](https://hextaui.com/docs/carousel/examples/controlled.md)
- [Rewind and start index](https://hextaui.com/docs/carousel/examples/rewind.md)
- [Links and focusable content](https://hextaui.com/docs/carousel/examples/links.md)
- [Adding and removing slides](https://hextaui.com/docs/carousel/examples/dynamic.md)
- [Nested](https://hextaui.com/docs/carousel/examples/nested.md)
- [Long content and a single slide](https://hextaui.com/docs/carousel/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/carousel/examples/rtl.md)