Swiper

Apresentação

O componente Swiper é responsável por criar um carrossel de slides interativo e responsivo. Ele oferece suporte a navegação por gestos de toque, reprodução automática, indicadores de slide e controles de navegação, sendo ideal para galerias de imagens, banners e apresentações de conteúdo.

Quando usar

• Para criar galerias de imagens
• Para exibir banners promocionais
• Para apresentar conteúdo em slides
• Para criar carrosséis de produtos
• Para implementar apresentações
• Para exibir conteúdo em formato de slideshow

Forma básica de uso

import { Swiper } from 'eitri-luminus';

// Swiper básico
<Swiper>
  <Swiper.Item>
    <img src="/slide1.jpg" alt="Slide 1" />
  </Swiper.Item>
  <Swiper.Item>
    <img src="/slide2.jpg" alt="Slide 2" />
  </Swiper.Item>
  <Swiper.Item>
    <img src="/slide3.jpg" alt="Slide 3" />
  </Swiper.Item>
</Swiper>

// Swiper com reprodução automática
<Swiper
  config={{
    autoPlay: true,
    interval: 3000,
    loop: true
  }}
>
  <Swiper.Item>Conteúdo 1</Swiper.Item>
  <Swiper.Item>Conteúdo 2</Swiper.Item>
  <Swiper.Item>Conteúdo 3</Swiper.Item>
</Swiper>

// Swiper com controles personalizados
<Swiper
  config={{
    showArrows: true,
    showIndicators: true,
    prevButton: <button>Anterior</button>,
    nextButton: <button>Próximo</button>
  }}
>
  <Swiper.Item>Slide 1</Swiper.Item>
  <Swiper.Item>Slide 2</Swiper.Item>
  <Swiper.Item>Slide 3</Swiper.Item>
</Swiper>

// Swiper com comportamento de arrasto personalizado
<Swiper
  config={{
    dragBehavior: {
      minVelocity: 5,
      minDistance: 10,
      dampingFactor: 0.8,
      returnAnimationDuration: 300,
      slideTransitionDuration: 300
    }
  }}
>
  <Swiper.Item>Item 1</Swiper.Item>
  <Swiper.Item>Item 2</Swiper.Item>
  <Swiper.Item>Item 3</Swiper.Item>
</Swiper>

Propriedades

Swiper

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

Swiper.Item

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o item
id	string	Identificador único do componente

SwiperConfig

Propriedade	Tipo	Descrição
autoPlay	boolean	Define se o carrossel deve reproduzir automaticamente (padrão: false)
interval	number	Intervalo em milissegundos entre os slides (padrão: 5000)
loop	boolean	Define se o carrossel deve voltar ao início após o último slide (padrão: true)
snapTo	'start' | 'center' | 'right'	Define o alinhamento do slide (padrão: 'start')
showArrows	boolean	Define se as setas de navegação devem ser exibidas (padrão: true)
showIndicators	boolean	Define se os indicadores de slide devem ser exibidos (padrão: true)
currentSlide	number	Define o slide atual
prevButton	React.ReactNode	Componente personalizado para o botão anterior
nextButton	React.ReactNode	Componente personalizado para o botão próximo
indicatorTemplate	function	Função para renderizar indicadores personalizados
onChange	function	Callback chamado quando o slide muda
onStart	function	Callback chamado quando a reprodução automática inicia
onStop	function	Callback chamado quando a reprodução automática para
dragBehavior	object	Configurações do comportamento de arrasto

DragBehavior

Propriedade	Tipo	Descrição
minVelocity	number	Velocidade mínima para iniciar a animação de inércia (padrão: 10)
minDistance	number	Distância mínima para considerar um arrasto (padrão: 2)
dampingFactor	number	Fator de amortecimento do arrasto (padrão: 1)
returnAnimationDuration	number	Duração da animação de retorno (padrão: 200)
slideTransitionDuration	number	Duração da transição entre slides (padrão: 200)
inertiaFactor	number	Fator de inércia da animação (padrão: 0.7)
minInertiaVelocity	number	Velocidade mínima para iniciar a inércia (padrão: 3)
maxInertiaDuration	number	Duração máxima da animação de inércia (padrão: 200)

Heranças

O componente Swiper 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 de toque
• Inclui suporte a reprodução automática
• Permite personalização completa dos controles
• Suporta diferentes comportamentos de alinhamento
• Inclui animações suaves de transição
• Suporta comportamento de inércia no arrasto
• É responsivo por padrão
• Permite personalização através de classes CSS
• Suporta indicadores de slide personalizados
• Inclui callbacks para eventos importantes
• Ideal para galerias e apresentações de conteúdo
• Suporta loop infinito de slides
• Permite controle programático do slide atual