Carousel

Carrossel de conteúdo rotativo com controles de navegação, indicadores e suporte para autoplay.

Importação

import { Carousel } from 'asterui'

Exemplos

Carrossel Básico

Carrossel simples com controles de navegação 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

Autoplay

Carrossel com avanço automático de slides. Pausa ao passar o 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

Efeito Fade

Carrossel com transição de fade em vez de deslizamento.

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

Carrossel Vertical

Carrossel com orientação 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

Sem Setas

Carrossel com setas ocultas, navegação apenas por pontos.

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

Posicionamento de Pontos

Posicionar pontos indicadores em diferentes locais.

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

Conteúdo Personalizado

Carrossel com conteúdo de slide personalizado como cards.

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`

Propriedade	Descrição	Tipo	Padrão
`children`	Slides do carrossel (componentes Carousel.Item)	`ReactNode`	-
`activeIndex`	Índice do slide atual (modo controlado)	`number`	-
`defaultActiveIndex`	Índice do slide padrão (modo não controlado)	`number`	`0`
`autoplay`	Avançar slides automaticamente	`boolean`	`false`
`autoplaySpeed`	Intervalo de autoplay em milissegundos	`number`	`3000`
`speed`	Duração da animação em milissegundos	`number`	`500`
`arrows`	Mostrar setas de navegação anterior/próxima	`boolean`	`true`
`dots`	Mostrar pontos indicadores de slide	`boolean \| { className?: string }`	`true`
`dotPlacement`	Posição dos pontos indicadores	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`
`effect`	Efeito de transição	`'scrollx' \| 'fade'`	`'scrollx'`
`infinite`	Habilitar loop infinito	`boolean`	`true`
`pauseOnHover`	Pausar autoplay ao passar o mouse	`boolean`	`true`
`vertical`	Orientação vertical do carrossel	`boolean`	`false`
`beforeChange`	Callback antes da mudança de slide	`(current: number, next: number) => void`	-
`afterChange`	Callback após mudança de slide	`(current: number) => void`	-
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testing; elementos filhos usam como prefixo	`string`	-

`Carousel.Item`

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo do slide	`ReactNode`	-
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testing	`string`	-

Métodos `CarouselRef`

Propriedade	Descrição	Tipo	Padrão
`goTo`	Navegar para um slide específico	`(index: number, animate?: boolean) => void`	-
`next`	Ir para o próximo slide	`() => void`	-
`prev`	Ir para o slide anterior	`() => void`	-

Dicas de Uso

Use Carousel.Item para envolver cada slide
Defina uma altura fixa no Carousel para layout consistente
Autoplay pausa ao passar o mouse para melhor UX
Use as setas do teclado para navegar quando o carrossel está focado
Acesse os métodos goTo, next, prev via ref

Carousel

Importação

Exemplos

Carrossel Básico

Autoplay

Efeito Fade

Carrossel Vertical

Sem Setas

Posicionamento de Pontos

Conteúdo Personalizado

Feature 1

API

Carousel

Carousel.Item

Métodos CarouselRef

Dicas de Uso

`Carousel`

`Carousel.Item`

Métodos `CarouselRef`