Carousel

Carrusel de contenido rotativo con controles de navegación, indicadores y soporte para reproducción automática.

Importar

import { Carousel } from 'asterui'

Ejemplos

Carrusel Básico

Carrusel simple con controles de navegación e indicadores.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Reproducción Automática

Carrusel con avance automático de diapositivas. Se pausa al pasar el mouse.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel autoplay autoplaySpeed={2000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/1/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/2/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/3/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Efecto de Fundido

Carrusel con transición de fundido en lugar de deslizamiento.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel effect="fade" autoplay autoplaySpeed={3000} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/10/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/11/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/12/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Carrusel Vertical

Carrusel con orientación vertical.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel vertical className="h-48 w-full max-w-md">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/4/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/5/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/6/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Sin Flechas

Carrusel con flechas ocultas, navegación solo por puntos.

import { Carousel } from 'asterui'

function App() {
  return (
      <Carousel arrows={false} className="w-full max-w-md h-48">
        <Carousel.Item>
          <img src="https://picsum.photos/seed/7/400/200" alt="Slide 1" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/8/400/200" alt="Slide 2" className="w-full h-full object-cover" />
        </Carousel.Item>
        <Carousel.Item>
          <img src="https://picsum.photos/seed/9/400/200" alt="Slide 3" className="w-full h-full object-cover" />
        </Carousel.Item>
      </Carousel>
    )
}

export default App

Ubicación de Puntos

Posiciona los puntos indicadores en diferentes ubicaciones.

Top Dots

Start Dots

import { Carousel, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Carousel dotPlacement="top" className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-info text-info-content h-full flex items-center justify-center">Top Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-success text-success-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
        <Carousel dotPlacement="start" arrows={false} className="w-full max-w-md h-32">
          <Carousel.Item>
            <div className="bg-warning text-warning-content h-full flex items-center justify-center">Start Dots</div>
          </Carousel.Item>
          <Carousel.Item>
            <div className="bg-error text-error-content h-full flex items-center justify-center">Slide 2</div>
          </Carousel.Item>
        </Carousel>
      </Space>
    )
}

export default App

Contenido Personalizado

Carrusel con contenido personalizado de diapositivas como tarjetas.

Feature 1

Discover amazing features

import { Carousel, Card, Button } from 'asterui'

function App() {
  return (
      <Carousel className="w-full max-w-md">
        <Carousel.Item>
          <Card title="Feature 1" className="bg-base-200 h-full">
            <p>Discover amazing features</p>
            <Button color="primary" size="sm">Learn More</Button>
          </Card>
        </Carousel.Item>
        <Carousel.Item>
          <Card title="Feature 2" className="bg-base-200 h-full">
            <p>Powerful and flexible</p>
            <Button color="secondary" size="sm">Explore</Button>
          </Card>
        </Carousel.Item>
      </Carousel>
    )
}

export default App

API

`Carousel`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Diapositivas del carrusel (componentes Carousel.Item)	`ReactNode`	-
`activeIndex`	Índice de diapositiva actual (modo controlado)	`number`	-
`defaultActiveIndex`	Índice de diapositiva predeterminado (modo no controlado)	`number`	`0`
`autoplay`	Avanzar diapositivas automáticamente	`boolean`	`false`
`autoplaySpeed`	Intervalo de reproducción automática en milisegundos	`number`	`3000`
`speed`	Duración de animación en milisegundos	`number`	`500`
`arrows`	Mostrar flechas de navegación prev/next	`boolean`	`true`
`dots`	Mostrar puntos indicadores de diapositiva	`boolean \| { className?: string }`	`true`
`dotPlacement`	Posición de los puntos indicadores	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`
`effect`	Efecto de transición	`'scrollx' \| 'fade'`	`'scrollx'`
`infinite`	Habilitar bucle infinito	`boolean`	`true`
`pauseOnHover`	Pausar reproducción automática al pasar el mouse	`boolean`	`true`
`vertical`	Orientación vertical del carrusel	`boolean`	`false`
`beforeChange`	Callback antes del cambio de diapositiva	`(current: number, next: number) => void`	-
`afterChange`	Callback después del cambio de diapositiva	`(current: number) => void`	-
`className`	Clases CSS adicionales	`string`	-
`data-testid`	ID de prueba para testing; elementos hijos usan esto como prefijo	`string`	-

`Carousel.Item`

Propiedad	Descripción	Tipo	Predeterminado
`children`	Contenido de la diapositiva	`ReactNode`	-
`className`	Clases CSS adicionales	`string`	-
`data-testid`	ID de prueba para testing	`string`	-

Métodos de `CarouselRef`

Propiedad	Descripción	Tipo	Predeterminado
`goTo`	Navegar a una diapositiva específica	`(index: number, animate?: boolean) => void`	-
`next`	Ir a la siguiente diapositiva	`() => void`	-
`prev`	Ir a la diapositiva anterior	`() => void`	-

Consejos de Uso

Usa Carousel.Item para envolver cada diapositiva
Establece una altura fija en el Carousel para un diseño consistente
La reproducción automática se pausa al pasar el mouse para mejor UX
Usa las teclas de flecha para navegar cuando el carrusel tiene foco
Accede a los métodos goTo, next, prev mediante ref

Carousel

Importar

Ejemplos

Carrusel Básico

Reproducción Automática

Efecto de Fundido

Carrusel Vertical

Sin Flechas

Ubicación de Puntos

Contenido Personalizado

Feature 1

API

Carousel

Carousel.Item

Métodos de CarouselRef

Consejos de Uso

`Carousel`

`Carousel.Item`

Métodos de `CarouselRef`