# Carousel: Long content and a single slide

> Unbroken text wraps inside its slide. With one slide the dots hide and the buttons stay disabled.

Example: https://hextaui.com/docs/carousel/examples/long-content
Component docs: https://hextaui.com/docs/carousel.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/carousel-long-content.json
```

This adds `components/examples/carousel/long-content.tsx` with the Carousel component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/carousel/long-content.tsx"
import {
  Carousel,
  CarouselContent,
  CarouselCounter,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

export function CarouselLongContent() {
  return (
    <div className="flex w-full max-w-md flex-col gap-6">
      <Carousel aria-label="Long content">
        <CarouselContent>
          <CarouselItem className="basis-4/5">
            <div className="rounded-xl border bg-card p-4 text-sm wrap-anywhere">
              Supercalifragilisticexpialidocious_with_an_unbroken_string_that_never_ends_and_keeps_going_well_past_the_edge
            </div>
          </CarouselItem>
          <CarouselItem className="basis-4/5">
            <div className="rounded-xl border bg-card p-4 text-sm">
              مرحبا 你好 👩‍👩‍👧‍👦 A second slide with mixed scripts.
            </div>
          </CarouselItem>
        </CarouselContent>
        <div className="mt-3 flex justify-center">
          <CarouselDots />
        </div>
      </Carousel>
      <Carousel aria-label="Single slide">
        <CarouselContent>
          <CarouselItem>
            <div className="flex aspect-video items-center justify-center rounded-xl border bg-card p-6 text-2xl font-semibold">
              Only one
            </div>
          </CarouselItem>
        </CarouselContent>
        <div className="mt-3 flex items-center justify-between">
          <CarouselCounter />
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}
```

## More Carousel examples

- [API](https://hextaui.com/docs/carousel/examples/api.md)
- [Several per view](https://hextaui.com/docs/carousel/examples/several-per-view.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)
- [Right to left](https://hextaui.com/docs/carousel/examples/rtl.md)