Carousel

O Carousel é um componente que permite a exibição de uma série de conteúdos (imagens, textos, cards, etc.) em um formato deslizante, em que o usuário pode navegar entre os itens de forma sequencial.

---

Quando usar:

• Quando há necessidade de exibir vários itens (como imagens, produtos, cards informativos) em um espaço reduzido, sem sobrecarregar a interface.
• Para destacar conteúdos importantes de forma dinâmica, como promoções, destaques ou novidades.
• Quando a ordem de exibição dos itens é relevante e a navegação sequencial faz sentido para o contexto.

Quando não usar:

• Quando o conteúdo for uma informação crítica e não deve ficar escondida.
• Se a quantidade de itens for muito pequena (menos de 3), pois a navegação pode parecer desnecessária.
• Em interfaces onde a acessibilidade é uma prioridade e o carousel pode dificultar a experiência para usuários com deficiências visuais ou motoras.
• Quando o espaço disponível na tela é insuficiente para exibir os itens de forma clara e legível.

Obs:

• Quando o carrossel for utilizado para exibir imagens, é recomendado usar o componente Image em vez da tag <img> nativa. Isso permite que todas as funcionalidades do Image, como dimmed e opacity, sejam utilizadas.

---

Uso

<CdsCarousel
	variant="green"
	size="md"
	text="Lorem Ipsum"
	@click="carouselClick = true"
/>

---

Preview

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
items	array	[]	--	Array de itens a serem exibidos no carousel.
snapTo	string	'start'	start center end	Define a posição em que os itens serão alinhados quando for feita a ação de rolagem no carrossel.
gap	number	0	--	Define o espaçamento entre os itens do carrossel.
showArrows	boolean	false	--	Controla a exibição das setas de rolagem.
darkArrows	boolean	false	--	Define se a cor das setas de rolagem deve ser escura.
clickable	boolean	false	--	Define se os itens do carrossel devem ser clicáveis.

Eventos

Nome	Descrição
@item-click	Evento emitido quando algum item do carrossel é clicado.

Slots

Nome	Descrição
#default	Slot utilizado para renderização de cada item do carrossel. Os dados do escopo do slot podem ser acessados no formato a seguir: ```slot={ item, index }```