Carousel

Slides nativos com scroll-snap, com inércia no toque, arrastar com o mouse, setas do teclado, pontos, miniaturas e um autoplay que pausa quando deve.

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselDemo() {
  return (
    <div className="w-full max-w-xs px-12">
      <Carousel aria-label="Numbers">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
        <div className="mt-3 flex justify-center">
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}

Instalação

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel.json

Adiciona o componente, os tokens de tema do HextaUI e quaisquer componentes do HextaUI dos quais ele depende.

Adicione os tokens de tema ao seu CSS global, se ainda não o fez.

Instale as dependências.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Copie e cole o código a seguir no seu projeto.

components/ui/carousel.tsx

"use client"

import * as React from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import {
  IconArrowDown,
  IconArrowLeft,

components/ui/button.tsx

"use client"

import * as React from "react"
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { IconAlertCircle, IconCircleCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/number-flow.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

Atualize os caminhos de importação para corresponder à configuração do seu projeto.

Uso

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

<Carousel aria-label="Featured">
  <CarouselContent>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
    <CarouselItem>...</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
  <CarouselDots />
</Carousel>

Os slides rolam nativamente com o CSS scroll snap, então a inércia do toque e a rolagem do trackpad têm a sensação da plataforma. Um mouse pode arrastar, e as teclas de seta movem um slide por vez.

Composição

Carousel
├── CarouselContent
│   └── CarouselItem
├── CarouselPrevious
├── CarouselNext
├── CarouselDots
├── CarouselCounter
├── CarouselAutoplayToggle
└── CarouselThumbnails
    └── CarouselThumbnail

Exemplos

API

Passe setApi para obter a API do carousel e escute select para exibir a sua própria posição. Next fica desativado no último slide, mas mantém o foco.

"use client"

import * as React from "react"

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselWithApi() {
  const [api, setApi] = React.useState<CarouselApi>()
  const [current, setCurrent] = React.useState(0)
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (!api) {
      return
    }
    const sync = () => {
      setCount(api.scrollSnapList().length)
      setCurrent(api.selectedScrollSnap() + 1)
    }
    sync()
    api.on("select", sync).on("reInit", sync)
    return () => {
      api.off("select", sync).off("reInit", sync)
    }
  }, [api])

  return (
    <div className="flex w-full max-w-xs flex-col items-center gap-2 px-12">
      <Carousel setApi={setApi} aria-label="Numbers" className="w-full">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      <p className="text-sm text-muted-foreground">
        Slide {current} of {count}
      </p>
    </div>
  )
}

Vários por vez

Os itens definem o próprio basis. Os espaçamentos vêm da prop spacing, então permanecem exatos em qualquer basis.

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>
  )
}

Pontos e contador

O ponto ativo se estica conforme os slides rolam e seus vizinhos abrem espaço. O contador gira apenas o dígito que mudou.

import {
  Carousel,
  CarouselContent,
  CarouselCounter,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

export function CarouselDotsAndCounter() {
  return (
    <Carousel aria-label="Dots and counter" className="w-full max-w-md">
      <CarouselContent>
        {Array.from({ length: 12 }, (_, index) => (
          <CarouselItem key={index} className="basis-4/5">
            <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
              {index + 1}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex items-center justify-between gap-4">
        <CarouselCounter />
        <CarouselDots />
      </div>
    </Carousel>
  )
}

autoplay vem desativado por padrão e continua desativado com movimento reduzido. Ele pausa ao passar o mouse, com foco do teclado, toque, arraste, aba oculta ou quando sai da vista, e o ponto ativo se preenche conforme o temporizador corre.

import {
  Carousel,
  CarouselAutoplayToggle,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselAutoplay() {
  return (
    <Carousel
      autoplay={{ delay: 3000 }}
      aria-label="Autoplay"
      className="w-full max-w-xs"
    >
      <CarouselContent>
        {slides.map((value) => (
          <CarouselItem key={value}>
            <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
              {value}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex items-center justify-center gap-2">
        <CarouselAutoplayToggle />
        <CarouselDots />
      </div>
    </Carousel>
  )
}

Miniaturas

<CarouselThumbnails /> acompanha o carousel principal e rola para manter a miniatura ativa à vista.

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselThumbnail,
  CarouselThumbnails,
} from "@/components/ui/carousel"

const photos = Array.from({ length: 10 }, (_, index) => index + 1)

export function CarouselWithThumbnails() {
  return (
    <Carousel aria-label="Gallery" className="w-full max-w-md">
      <CarouselContent>
        {photos.map((photo) => (
          <CarouselItem key={photo}>
            <div className="relative overflow-hidden rounded-xl border">
              <img
                src="/preview/landscape.svg"
                alt={`Landscape ${photo}`}
                draggable={false}
                className="aspect-video w-full object-cover"
              />
              <span className="absolute start-3 top-3 rounded-md bg-background px-2 py-1 text-xs font-medium">
                {photo}
              </span>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3">
        <CarouselThumbnails>
          {photos.map((photo) => (
            <CarouselThumbnail key={photo} className="w-20">
              <img
                src="/preview/landscape.svg"
                alt=""
                draggable={false}
                className="aspect-video w-full object-cover"
              />
            </CarouselThumbnail>
          ))}
        </CarouselThumbnails>
      </div>
    </Carousel>
  )
}

Vertical

orientation="vertical" precisa de uma altura em <CarouselContent />. Os botões vão para cima e para baixo.

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselVertical() {
  return (
    <div className="w-full max-w-xs py-12">
      <Carousel orientation="vertical" aria-label="Vertical">
        <CarouselContent className="h-52">
          {slides.map((value) => (
            <CarouselItem key={value} className="basis-1/2">
              <div className="flex h-full items-center justify-center rounded-xl border bg-card p-6 text-3xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Controlado

Passe index e onIndexChange. Deslizar atualiza seu estado e seu estado rola o carousel.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselControlled() {
  const [index, setIndex] = React.useState(2)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        {slides.map((value, position) => (
          <Button
            key={value}
            size="sm"
            variant={position === index ? "secondary" : "outline"}
            onClick={() => setIndex(position)}
          >
            {value}
          </Button>
        ))}
        <span className="text-sm text-muted-foreground">index = {index}</span>
      </div>
      <Carousel index={index} onIndexChange={setIndex} aria-label="Controlled">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <div className="mt-3 flex justify-center">
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}

Voltar ao início e índice inicial

rewind leva Next, no último slide, de volta ao primeiro. defaultIndex abre em um slide sem animação de rolagem.

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselRewind() {
  return (
    <div className="w-full max-w-xs px-12">
      <Carousel rewind defaultIndex={2} aria-label="Rewind">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  )
}

Links e conteúdo focável

Arrastar um link com o mouse rola sem abri-lo. Navegar com Tab até um slide fora da tela o rola para a vista.

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const articles = Array.from({ length: 6 }, (_, index) => index + 1)

export function CarouselLinks() {
  return (
    <Carousel spacing="sm" aria-label="Articles" className="w-full max-w-md">
      <CarouselContent>
        {articles.map((article) => (
          <CarouselItem key={article} className="basis-4/5 sm:basis-1/2">
            <a
              href="#"
              className="flex h-32 flex-col justify-end gap-1 rounded-xl border bg-card p-4 outline-none focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden"
            >
              <span className="text-sm font-medium">Article {article}</span>
              <span className="text-sm text-muted-foreground">
                Read the full story
              </span>
            </a>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex justify-center">
        <CarouselDots />
      </div>
    </Carousel>
  )
}

Adicionar e remover slides

Os pontos, o contador e os botões se atualizam conforme os slides entram e saem.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Carousel,
  CarouselContent,
  CarouselCounter,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

export function CarouselDynamic() {
  const [slides, setSlides] = React.useState([1, 2, 3])

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="outline"
          onClick={() => setSlides([...slides, slides.length + 1])}
        >
          Add slide
        </Button>
        <Button
          size="sm"
          variant="outline"
          disabled={slides.length === 0}
          onClick={() => setSlides(slides.slice(0, -1))}
        >
          Remove slide
        </Button>
      </div>
      <Carousel aria-label="Dynamic">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value} className="basis-1/2">
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <div className="mt-3 flex items-center justify-between">
          <CarouselCounter />
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}

Aninhado

As teclas de seta, o arrastar e os pontos só movem o carousel em que você está.

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
} from "@/components/ui/carousel"

const outerSlides = [1, 2, 3]
const innerSlides = [1, 2, 3, 4, 5]

export function CarouselNested() {
  return (
    <Carousel aria-label="Outer" className="w-full max-w-md">
      <CarouselContent>
        {outerSlides.map((outer) => (
          <CarouselItem key={outer}>
            <div className="flex flex-col gap-3 rounded-xl border bg-card p-4">
              <p className="text-sm font-medium">Outer slide {outer}</p>
              <Carousel spacing="sm" aria-label={`Inner ${outer}`}>
                <CarouselContent>
                  {innerSlides.map((inner) => (
                    <CarouselItem key={inner} className="basis-1/3">
                      <div className="flex aspect-square items-center justify-center rounded-lg bg-muted text-lg font-medium">
                        {outer}.{inner}
                      </div>
                    </CarouselItem>
                  ))}
                </CarouselContent>
                <div className="mt-2 flex justify-center">
                  <CarouselDots />
                </div>
              </Carousel>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex justify-center">
        <CarouselDots />
      </div>
    </Carousel>
  )
}

Conteúdo longo e um único slide

Texto sem quebra é quebrado dentro do seu slide. Com um único slide, os pontos ficam ocultos e os botões permanecem desativados.

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>
  )
}

Da direita para a esquerda

Os slides começam pela direita, as setas se invertem, a tecla de seta para a esquerda avança e os pontos se preenchem a partir da direita.

import {
  Carousel,
  CarouselContent,
  CarouselCounter,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md px-12">
      <Carousel autoplay={{ delay: 4000 }} aria-label="شرائح">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value} className="basis-1/2">
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
        <div className="mt-3 flex items-center justify-between">
          <CarouselCounter />
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}

Teclado

As teclas funcionam com o foco em qualquer lugar dentro do carousel, exceto em campos de texto e carousels aninhados.

Tecla	Ação
`→`	Próximo slide. Anterior em layouts da direita para a esquerda. ↓ em carousels verticais.
`←`	Slide anterior. Próximo em layouts da direita para a esquerda. ↑ em carousels verticais.
`Tab`	Percorre os botões, o ponto ativo e o conteúdo dos slides, rolando para a vista os slides fora da tela.
`EnterSpace`	Ativa o botão, ponto ou miniatura em foco.

Acessibilidade

A raiz é uma region descrita como carousel. Dê a ela um aria-label.
Cada item é um group descrito como slide e rotulado com sua posição, como “3 of 5”.
Uma região live educada (polite) anuncia o novo slide após a navegação por teclado ou botão, e fica em silêncio enquanto o autoplay roda.
Pontos e miniaturas usam uma única parada de tabulação, e o foco acompanha o ativo.
Previous e Next continuam focáveis quando desativados, então o foco nunca se perde em nenhuma das pontas.

Referência da API

Carousel

Prop	Tipo	Padrão
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`spacing`Espaço entre os slides.	`"none" \| "sm" \| "default" \| "lg"`	`"default"`
`index`	`number`	`–`
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	`–`
`rewind`Volta do último slide para o primeiro.	`boolean`	`false`
`mouseDrag`Permite arrastar os slides com o mouse.	`boolean`	`true`
`autoplay`Avança por um temporizador. delay tem padrão de 5000ms, mínimo de 1000ms.	`boolean \| { delay?: number }`	`false`
`setApi`	`(api: CarouselApi) => void`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descrição
`data-slot="carousel"`	Selecione a raiz no CSS.
`data-orientation`	A orientação.
`--carousel-spacing`	O espaço entre os slides, definido por spacing.

CarouselContent

Prop	Tipo	Padrão
`className`Aplicado à trilha que contém os slides.	`string`	`–`
`viewportClassName`Aplicado ao viewport de rolagem.	`string`	`–`

Atributo	Descrição
`data-slot="carousel-content"`	O viewport de rolagem.
`data-slot="carousel-container"`	A trilha dentro dele.
`data-scrollable`	Presente quando há mais de uma posição.
`data-dragging`	Presente enquanto um arraste com o mouse está em andamento.

CarouselItem

Prop	Tipo	Padrão
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descrição
`data-slot="carousel-item"`	Defina basis-* para mostrar vários por vez.

CarouselPrevious e CarouselNext

Ambos renderizam um <Button /> e aceitam suas props. Ficam fora do conteúdo, então deixe espaço ao redor do carousel.

Prop	Tipo	Padrão
`variant`	`ButtonProps["variant"]`	`"outline"`
`size`	`ButtonProps["size"]`	`"icon-sm"`
`children`Segue a orientação e a direção.	`ReactNode`	`Arrow icon`

Atributo	Descrição
`data-slot="carousel-previous"`	Rotulado como “Previous slide”.
`data-slot="carousel-next"`	Rotulado como “Next slide”.
`data-disabled`	Presente em qualquer das pontas. O botão continua focável.

CarouselDots

Prop	Tipo	Padrão
`aria-label`	`string`	`"Choose slide"`

Atributo	Descrição
`data-slot="carousel-dots"`	O grupo de pontos. Oculto com uma única posição.
`data-slot="carousel-dot"`	Cada ponto. O ativo tem aria-current.
`--dot-active`	De 0 a 1, quão ativo um ponto está durante a rolagem.

CarouselCounter

Atributo	Descrição
`data-slot="carousel-counter"`	Mostra a posição atual sobre o total, com um dígito que gira.

CarouselAutoplayToggle

Prop	Tipo	Padrão
`variant`	`ButtonProps["variant"]`	`"ghost"`
`size`	`ButtonProps["size"]`	`"icon-sm"`

Atributo	Descrição
`data-slot="carousel-autoplay-toggle"`	Rotulado como “Pause slideshow” ou “Play slideshow”.

CarouselThumbnails

Prop	Tipo	Padrão
`aria-label`	`string`	`"Slides"`

Atributo	Descrição
`data-slot="carousel-thumbnails"`	A faixa de rolagem.

CarouselThumbnail

Prop	Tipo	Padrão
`index`O slide que ele abre. O padrão é sua posição na faixa.	`number`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Atributo	Descrição
`data-slot="carousel-thumbnail"`	Seleciona as miniaturas no CSS.
`data-active`	Presente enquanto o seu slide está à vista.

CarouselApi

Retornado por setApi e useCarousel(). Passe jump: true para mover sem animar.

Prop	Tipo	Padrão
`scrollPrev`	`(jump?: boolean) => void`	`–`
`scrollNext`	`(jump?: boolean) => void`	`–`
`scrollTo`Rola até uma posição de encaixe.	`(index: number, jump?: boolean) => void`	`–`
`scrollToSlide`Rola até a posição que mostra um slide.	`(slideIndex: number, jump?: boolean) => void`	`–`
`canScrollPrev`	`() => boolean`	`–`
`canScrollNext`	`() => boolean`	`–`
`selectedScrollSnap`	`() => number`	`–`
`scrollSnapList`	`() => number[]`	`–`
`slidesInView`	`() => number[]`	`–`
`slideNodes`	`() => HTMLElement[]`	`–`
`viewportNode`	`() => HTMLElement \| null`	`–`
`play`	`() => void`	`–`
`stop`	`() => void`	`–`
`isPlaying`	`() => boolean`	`–`
`on / off`	`(event: "select" \| "scroll" \| "settle" \| "reInit", listener) => CarouselApi`	`–`

useCarousel

Use dentro de <Carousel /> para criar seus próprios controles. Retorna api, orientation, selectedIndex, snapCount, slideCount, slidesInView, canScrollPrev, canScrollNext, isPlaying e os métodos de rolagem e reprodução.