Carousel

Apresentação

O componente Carousel é responsável por exibir um conjunto de itens em um carrossel deslizante, permitindo a navegação entre slides através de setas, indicadores ou gestos. O componente oferece recursos avançados como autoplay, loop, indicadores personalizados e controle de visibilidade.

Quando usar

• Para exibir galerias de imagens
• Para apresentar produtos em destaque
• Para criar slideshows
• Para mostrar conteúdo em sequência
• Para exibir depoimentos ou reviews
• Para criar apresentações de conteúdo

Forma básica de uso

import { Carousel } from 'eitri-luminus';

// Carrossel básico
<Carousel>
  <Carousel.Item>
    <img src="/imagem1.jpg" alt="Imagem 1" />
  </Carousel.Item>
  <Carousel.Item>
    <img src="/imagem2.jpg" alt="Imagem 2" />
  </Carousel.Item>
</Carousel>

// Carrossel com configurações personalizadas
<Carousel
  config={{
    autoPlay: true,
    interval: 5000,
    showArrows: true,
    showIndicators: true,
    loop: true,
    snapTo: 'center'
  }}
>
  <Carousel.Item>
    <img src="/imagem1.jpg" alt="Imagem 1" />
  </Carousel.Item>
  <Carousel.Item>
    <img src="/imagem2.jpg" alt="Imagem 2" />
  </Carousel.Item>
</Carousel>

// Carrossel com controles personalizados
<Carousel
  config={{
    prevButton: <button className="btn btn-circle">←</button>,
    nextButton: <button className="btn btn-circle">→</button>,
    indicatorTemplate: (current, target) => (
      <span className={`dot ${current === target ? 'active' : ''}`} />
    )
  }}
>
  <Carousel.Item>
    <img src="/imagem1.jpg" alt="Imagem 1" />
  </Carousel.Item>
  <Carousel.Item>
    <img src="/imagem2.jpg" alt="Imagem 2" />
  </Carousel.Item>
</Carousel>

Propriedades

Carousel

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente
config	CarouselConfig	Configurações do carrossel (ver abaixo)

Carousel.Item

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o item

CarouselConfig

Propriedade	Tipo	Descrição
autoPlay	boolean	Se o carrossel deve iniciar automaticamente
autoPlayWhenVisible	boolean	Se o autoplay deve funcionar apenas quando visível
interval	number	Intervalo entre slides em milissegundos
showArrows	boolean	Se deve mostrar as setas de navegação
showIndicators	boolean	Se deve mostrar os indicadores de slide
snapTo	'start' | 'center' | 'end'	Alinhamento do slide
loop	boolean	Se deve voltar ao início após o último slide
currentSlide	number	Slide atual (controlado)
onChange	(index: number) => void	Callback ao mudar de slide
onStart	() => void	Callback ao iniciar o autoplay
onStop	() => void	Callback ao parar o autoplay
onVisibilityChange	(isVisible: boolean) => void	Callback ao mudar visibilidade
prevButton	React.ReactNode	Botão personalizado para voltar
nextButton	React.ReactNode	Botão personalizado para avançar
indicatorTemplate	(currentIndex: number, targetIndex: number, totalSlides: number) => React.ReactNode	Template para indicadores

Heranças

O componente Carousel e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente suporta navegação por gestos em dispositivos touch
• O autoplay é pausado automaticamente quando o carrossel não está visível
• É possível personalizar completamente a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se usar para conteúdo visual como imagens ou cards
• O componente suporta qualquer tipo de conteúdo dentro dos slides
• Os indicadores podem ser personalizados para diferentes estilos
• O componente oferece callbacks para controle programático