Carousel

Diapositivas nativas con scroll-snap, con inercia en pantallas táctiles, arrastre con el ratón, teclas de flecha, puntos, miniaturas y una reproducción automática que se pausa cuando debe.

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

Instalación

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

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Añade los tokens del tema a tu CSS global, si aún no lo has hecho.

Instala las dependencias.

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

Copia y pega el siguiente código en tu proyecto.

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 = {

Actualiza las rutas de importación para que coincidan con la configuración de tu proyecto.

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>

Las diapositivas se desplazan de forma nativa con CSS scroll snap, así que el impulso táctil y el desplazamiento del trackpad se sienten como los de la plataforma. Un ratón puede arrastrar, y las teclas de flecha mueven una diapositiva cada vez.

Composición

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

Ejemplos

API

Pasa setApi para obtener la API del carousel y escucha select para mostrar tu propia posición. Next se deshabilita en la última diapositiva pero conserva el 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>
  )
}

Varias por vista

Los elementos definen su propio basis. Los márgenes vienen de la prop spacing, así que se mantienen exactos con cualquier 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>
  )
}

Puntos y contador

El punto activo se estira a medida que se desplazan las diapositivas y sus vecinos le hacen sitio. El contador solo gira el dígito que cambió.

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

autoplay está desactivado por defecto y sigue desactivado con movimiento reducido. Se pausa al pasar el cursor, con el foco del teclado, al tocar, al arrastrar, con una pestaña oculta o cuando sale de la vista, y el punto activo se llena mientras corre el temporizador.

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 /> sigue al carousel principal y se desplaza para mantener visible la miniatura activa.

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" necesita una altura en <CarouselContent />. Los botones pasan arriba y abajo.

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

Pasa index y onIndexChange. Deslizar actualiza tu estado y tu estado desplaza el 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>
  )
}

Rebobinado e índice inicial

rewind envía Next en la última diapositiva de vuelta a la primera. defaultIndex abre en una diapositiva sin animación de desplazamiento.

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

Enlaces y contenido enfocable

Arrastrar un enlace con el ratón desplaza sin abrirlo. Tabular hasta una diapositiva fuera de pantalla la desplaza hasta hacerla visible.

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

Añadir y quitar diapositivas

Los puntos, el contador y los botones se actualizan a medida que las diapositivas entran y salen.

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

Anidado

Las teclas de flecha, el arrastre y los puntos solo mueven el carousel en el que estás.

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

Contenido largo y una sola diapositiva

El texto sin espacios se ajusta dentro de su diapositiva. Con una sola diapositiva los puntos se ocultan y los botones permanecen deshabilitados.

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

De derecha a izquierda

Las diapositivas empiezan a la derecha, las flechas se invierten, la tecla de flecha izquierda avanza y los puntos se llenan desde la derecha.

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

Las teclas funcionan mientras el foco esté en cualquier punto del carousel, excepto en campos de texto y carousels anidados.

Key	Acción
`→`	Diapositiva siguiente. Anterior en diseños de derecha a izquierda. ↓ en carousels verticales.
`←`	Diapositiva anterior. Siguiente en diseños de derecha a izquierda. ↑ en carousels verticales.
`Tab`	Recorre los botones, el punto activo y el contenido de las diapositivas, desplazando a la vista las diapositivas fuera de pantalla.
`EnterSpace`	Activa el botón, punto o miniatura con foco.

Accesibilidad

La raíz es una region descrita como carousel. Dale un aria-label.
Cada elemento es un group descrito como diapositiva y etiquetado con su posición, como “3 of 5”.
Una región activa polite anuncia la nueva diapositiva tras navegar con el teclado o los botones, y permanece en silencio mientras funciona el autoplay.
Los puntos y las miniaturas usan una sola parada del tabulador, y el foco sigue al activo.
Previous y Next siguen pudiendo recibir foco cuando están deshabilitados, así que el foco nunca se pierde en ninguno de los extremos.

Referencia de la API

Carousel

Prop	Tipo	Predeterminado
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`spacing`Separación entre diapositivas.	`"none" \| "sm" \| "default" \| "lg"`	`"default"`
`index`	`number`	`–`
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	`–`
`rewind`Vuelve de la última diapositiva a la primera.	`boolean`	`false`
`mouseDrag`Permite que un ratón arrastre las diapositivas.	`boolean`	`true`
`autoplay`Avanza con un temporizador. delay vale 5000 ms por defecto, con un mínimo de 1000 ms.	`boolean \| { delay?: number }`	`false`
`setApi`	`(api: CarouselApi) => void`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="carousel"`	Apunta a la raíz en CSS.
`data-orientation`	La orientación.
`--carousel-spacing`	La separación entre diapositivas, definida por spacing.

CarouselContent

Prop	Tipo	Predeterminado
`className`Se aplica a la pista que contiene las diapositivas.	`string`	`–`
`viewportClassName`Se aplica al viewport de desplazamiento.	`string`	`–`

Atributo	Descripción
`data-slot="carousel-content"`	El viewport de desplazamiento.
`data-slot="carousel-container"`	La pista que contiene.
`data-scrollable`	Presente cuando hay más de una posición.
`data-dragging`	Presente mientras hay un arrastre con el ratón en curso.

CarouselItem

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

Atributo	Descripción
`data-slot="carousel-item"`	Define basis-* para mostrar varias por vista.

CarouselPrevious y CarouselNext

Ambos renderizan un <Button /> y aceptan sus props. Van fuera del contenido, así que deja espacio alrededor del carousel.

Prop	Tipo	Predeterminado
`variant`	`ButtonProps["variant"]`	`"outline"`
`size`	`ButtonProps["size"]`	`"icon-sm"`
`children`Sigue la orientación y la dirección.	`ReactNode`	`Arrow icon`

Atributo	Descripción
`data-slot="carousel-previous"`	Etiquetado como “Previous slide”.
`data-slot="carousel-next"`	Etiquetado como “Next slide”.
`data-disabled`	Presente en cualquiera de los extremos. El botón sigue pudiendo recibir foco.

CarouselDots

Prop	Tipo	Predeterminado
`aria-label`	`string`	`"Choose slide"`

Atributo	Descripción
`data-slot="carousel-dots"`	El grupo de puntos. Oculto con una sola posición.
`data-slot="carousel-dot"`	Cada punto. El activo tiene aria-current.
`--dot-active`	De 0 a 1, qué tan activo está un punto al desplazarse.

CarouselCounter

Atributo	Descripción
`data-slot="carousel-counter"`	Muestra la posición actual sobre el total con un dígito que rueda.

CarouselAutoplayToggle

Prop	Tipo	Predeterminado
`variant`	`ButtonProps["variant"]`	`"ghost"`
`size`	`ButtonProps["size"]`	`"icon-sm"`

Atributo	Descripción
`data-slot="carousel-autoplay-toggle"`	Etiquetado como “Pause slideshow” o “Play slideshow”.

CarouselThumbnails

Prop	Tipo	Predeterminado
`aria-label`	`string`	`"Slides"`

Atributo	Descripción
`data-slot="carousel-thumbnails"`	La tira de desplazamiento.

CarouselThumbnail

Prop	Tipo	Predeterminado
`index`La diapositiva que abre. Por defecto es su posición en la tira.	`number`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<button>`

Atributo	Descripción
`data-slot="carousel-thumbnail"`	Selecciona las miniaturas en CSS.
`data-active`	Presente mientras su diapositiva está a la vista.

CarouselApi

Se devuelve mediante setApi y useCarousel(). Pasa jump: true para moverte sin animación.

Prop	Tipo	Predeterminado
`scrollPrev`	`(jump?: boolean) => void`	`–`
`scrollNext`	`(jump?: boolean) => void`	`–`
`scrollTo`Se desplaza a una posición de ajuste.	`(index: number, jump?: boolean) => void`	`–`
`scrollToSlide`Se desplaza a la posición que muestra una diapositiva.	`(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

Úsalo dentro de <Carousel /> para construir tus propios controles. Devuelve api, orientation, selectedIndex, snapCount, slideCount, slidesInView, canScrollPrev, canScrollNext, isPlaying y los métodos de desplazamiento y reproducción.