Carrossel
Uma galeria através da qual você desliza, uma carta de cada vez. Construído em rolagem nativa com CSS rolagem, então toque deslize, gestos trackpad e teclado rolagem todos funcionam por conta própria; as setas e o indicador de posição são as únicas partes que precisam JavaScript.
Instalação
Você pode adicionar este carrossel usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add carouselUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Largura das cartas
Cada item preenche a faixa por padrão, então exatamente uma carta está em exibição por slide. CarouselItem ao invés de na faixa, então sobrepondo-a dá uma olhada da próxima carta ou uma sequência de larguras mistas. As posições são lidas de volta do DOM em vez de calculadas a partir de uma largura de cartão fixo, então nada precisa dizer quando essas larguras mudam.
{/* One card per slide is the default: items fill the track */}<CarouselItem>…</CarouselItem>
{/* Override to show a peek of the next card, or to mix widths */}<CarouselItem className="w-[85%]">…</CarouselItem><CarouselItem className="w-[220px]">…</CarouselItem>Alinhamento e controlos
align="center" repousa cada carta no meio da faixa em vez da borda esquerda, que se adapta a uma galeria com uma carta de herói em vista. showArrows e showDots retirar o cromado de volta para uma pista desbotada, e gap define o espaçamento em pixels.
{/* Snap each card to the middle of the track */}<Carousel aria-label="Gallery" align="center" gap={24}>…</Carousel>
{/* Bare track: no arrows, no dots, swipe only */}<Carousel aria-label="Logos" showArrows={false} showDots={false}>…</Carousel>Acessibilidade
A região anuncia-se como um carrossel e toma o seu nome de aria-label, o que é necessário. Cada carta é rotulada com a sua posição, de modo que um leitor de tela lê "3 de 7" sem que você numerar nada. A faixa é focalizável, de modo que as teclas de seta rolem- na, e os botões prev/ next desativam nas extremidades em vez de silenciosamente não fazer nada. prefers-reduced-motion, pulando em vez de animando.