ComponentesNavigation
Carousel
Exibe conteúdo em slides navegáveis com suporte a swipe, autoplay e indicadores de posição usando `mk-carousel` e `mk-carousel-item`.
Componente Experimental
Este componente é experimental — não possui design aprovado no Figma. A API pode mudar entre versões.
O mk-carousel exibe conteúdo em slides navegáveis com botões de seta, indicadores de posição (dots) e suporte a swipe touch. Cada slide deve ser envolvido por mk-carousel-item, que fornece semântica de acessibilidade ao item.
Padrão
import { MkCarousel, MkCarouselItem } from '@db1/makuco-ui-react';
<MkCarousel>
<MkCarouselItem label="Slide 1">Conteúdo 1</MkCarouselItem>
<MkCarouselItem label="Slide 2">Conteúdo 2</MkCarouselItem>
<MkCarouselItem label="Slide 3">Conteúdo 3</MkCarouselItem>
</MkCarousel><mk-carousel>
<mk-carousel-item label="Slide 1">Conteúdo 1</mk-carousel-item>
<mk-carousel-item label="Slide 2">Conteúdo 2</mk-carousel-item>
<mk-carousel-item label="Slide 3">Conteúdo 3</mk-carousel-item>
</mk-carousel>Múltiplos slides visíveis
A prop slidesPerView define quantos slides aparecem ao mesmo tempo. Os indicadores de posição ajustam-se automaticamente ao número de posições navegáveis.
import { MkCarousel, MkCarouselItem } from '@db1/makuco-ui-react';
<MkCarousel slidesPerView={3}>
<MkCarouselItem label="Slide 1">Conteúdo 1</MkCarouselItem>
<MkCarouselItem label="Slide 2">Conteúdo 2</MkCarouselItem>
<MkCarouselItem label="Slide 3">Conteúdo 3</MkCarouselItem>
<MkCarouselItem label="Slide 4">Conteúdo 4</MkCarouselItem>
<MkCarouselItem label="Slide 5">Conteúdo 5</MkCarouselItem>
</MkCarousel><mk-carousel slides-per-view="3">
<mk-carousel-item label="Slide 1">Conteúdo 1</mk-carousel-item>
<mk-carousel-item label="Slide 2">Conteúdo 2</mk-carousel-item>
<mk-carousel-item label="Slide 3">Conteúdo 3</mk-carousel-item>
<mk-carousel-item label="Slide 4">Conteúdo 4</mk-carousel-item>
<mk-carousel-item label="Slide 5">Conteúdo 5</mk-carousel-item>
</mk-carousel>Autoplay
Com autoplay, o carousel avança automaticamente no intervalo definido por autoplayInterval (padrão: 3000 ms). Um botão de pausa é exibido automaticamente para cumprir o requisito WCAG 2.2.2. O avanço é suspenso enquanto o foco estiver dentro do componente.
import { MkCarousel, MkCarouselItem } from '@db1/makuco-ui-react';
<MkCarousel autoplay autoplayInterval={2500}>
<MkCarouselItem label="Slide 1">Conteúdo 1</MkCarouselItem>
<MkCarouselItem label="Slide 2">Conteúdo 2</MkCarouselItem>
<MkCarouselItem label="Slide 3">Conteúdo 3</MkCarouselItem>
</MkCarousel><mk-carousel autoplay autoplay-interval="2500">
<mk-carousel-item label="Slide 1">Conteúdo 1</mk-carousel-item>
<mk-carousel-item label="Slide 2">Conteúdo 2</mk-carousel-item>
<mk-carousel-item label="Slide 3">Conteúdo 3</mk-carousel-item>
</mk-carousel>Sem loop
Com loop={false}, a navegação para ao atingir o primeiro ou o último slide. Os botões de seta ficam desabilitados nesses limites.
import { MkCarousel, MkCarouselItem } from '@db1/makuco-ui-react';
<MkCarousel loop={false}>
<MkCarouselItem label="Slide 1">Conteúdo 1</MkCarouselItem>
<MkCarouselItem label="Slide 2">Conteúdo 2</MkCarouselItem>
<MkCarouselItem label="Slide 3">Conteúdo 3</MkCarouselItem>
</MkCarousel><mk-carousel [loop]="false">
<mk-carousel-item label="Slide 1">Conteúdo 1</mk-carousel-item>
<mk-carousel-item label="Slide 2">Conteúdo 2</mk-carousel-item>
<mk-carousel-item label="Slide 3">Conteúdo 3</mk-carousel-item>
</mk-carousel>Props — mk-carousel
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
slidesPerView | number | 1 | Número de slides visíveis ao mesmo tempo. |
autoplay | boolean | false | Ativa o avanço automático entre slides. |
autoplayInterval | number | 3000 | Intervalo em milissegundos entre avanços automáticos. Requer autoplay. |
loop | boolean | true | Quando true, a navegação faz loop ao atingir o primeiro ou último slide. |
activeIndex | number | 0 | Índice do slide ativo (base zero). Pode ser controlado externamente. |
locale | string | — | Tag de locale BCP 47 para os rótulos ARIA (ex.: "en", "es", "pt-BR"). Recai para lang do ancestral ou pt-BR. |
Props — mk-carousel-item
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
label | string | — | Rótulo acessível do slide, anunciado por leitores de tela. Sempre recomendado. |
Eventos
| Evento | Componente | Payload | Descrição |
|---|---|---|---|
mkSlideChange | mk-carousel | { index: number } | Emitido quando o slide ativo muda. index é o índice base zero do novo slide. |
Slots
| Componente | Slot | Descrição |
|---|---|---|
mk-carousel | (default) | Filhos diretos são os slides. Use sempre mk-carousel-item como wrapper. |
mk-carousel-item | (default) | Conteúdo do slide. |
Acessibilidade
- O contêiner tem
role="region"earia-roledescription="carousel". - Cada
mk-carousel-itemrecebe automaticamenterole="group"earia-roledescription="slide". Forneça sempre a proplabelpara descrição pelo leitor de tela. - Os botões de navegação ficam desabilitados ao atingir os limites quando
loop={false}. - Os indicadores de posição (dots) formam uma
role="tablist", com cada dot comorole="tab"earia-selected. - Com
autoplayativo, o avanço é pausado ao receber foco dentro do componente (WCAG 2.2.2). O botão de pausa/reprodução permanece sempre visível. - Navegação por swipe touch funciona nativamente.
- Os rótulos ARIA dos botões e dots são traduzíveis via prop
locale(pt,es,en).