Carrosséis com CSS

Adam Argyle

Publicado em: 20 de março de 2025

A partir do Chrome 135, você pode usar recursos da especificação CSS Overflow 5 (em inglês) projetados para criar experiências de rolagem e carrossel.

Esta postagem é uma visão geral de várias experiências diferentes de rolagem e carrossel criadas usando esses novos recursos e sem JavaScript. Assista ao vídeo a seguir e veja o que agora é possível fazer.

O vídeo mostra uma harmonia de botões e marcadores de rolagem, animação controlada por rolagem, consultas scroll-state(), :has(), grade, âncora e muito mais.

A história de acessibilidade é ainda mais impressionante.

As práticas recomendadas de carrossel são processadas pelo navegador, graças ao trabalho conjunto das equipes de engenharia e acessibilidade. Seria muito difícil criar um carrossel mais acessível do que este.

Conheça ::scroll-button() e ::scroll-marker()

Um carrossel é uma área de rolagem com até dois recursos de acessibilidade da interface adicionados: botões e marcadores.

Na primeira versão dos recursos de carrossel CSS, os botões e marcadores são criados com CSS. O navegador coloca os elementos como irmãos, com as funções adequadas, na ordem de tabulação correta e mantém o estado deles. Isso facilita o desenvolvimento de um carrossel acessível.

• Botões de rolagem
  Elementos <button> de rolagem interativos, com estado e fornecidos pelo navegador que ajudam no acesso ao conteúdo e rolam 85% de uma área de rolagem quando pressionados.

• Marcadores de rolagem
  Elementos de navegação com estado <a> fornecidos pelo navegador que ajudam no acesso ao conteúdo de qualquer item solicitado na área de rolagem.

O restante desta postagem demonstra como criar um carrossel usando esses novos recursos.

Começar com um scroller

Você pode adicionar botões e marcadores a qualquer área de rolagem no seu site.

O CSS a seguir cria uma área de rolagem básica para uso em etapas posteriores, em que botões e marcadores serão adicionados. O ajuste de rolagem não é obrigatório para um carrossel, mas é usado neste exemplo. Os carrosséis também funcionam para roladores verticais e bidirecionais.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Adicionar botões de rolagem com ::scroll-button()

Dependendo do sistema operacional, talvez já haja botões de rolagem ao redor das barras de rolagem. Os botões de barra de rolagem integrados tendem a mover uma área de rolagem, enquanto os botões de rolagem CSS paginam 85% da área de rolagem.

Para carrosséis que mostram apenas um item de largura total por vez com pontos de ajuste de rolagem, isso vai parecer um valor por item. Em listas longas de itens em que mais de um fica visível por vez, a rolagem é quase de uma página inteira.

Para adicionar botões de rolagem com CSS:

1. Adicione-os como outros pseudoelementos, com um seletor: .carousel::scroll-button(right) para um botão de rolagem para a direita.
2. Especifique content com um texto alternativo de substituição acessível opcional.

O navegador vai criar botões reais, com seu conteúdo dentro, como irmãos do scroller. Agora você pode organizar, estilizar ou anchor() esses botões conforme necessário. O CSS a seguir cria dois botões, um para rolar para a esquerda e outro para rolar para a direita.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

Adicionar marcadores de rolagem com ::scroll-marker()

Semelhante ao elemento de arrasto da barra de rolagem, os marcadores de rolagem CSS podem indicar o tamanho do carrossel e permitir que o usuário vá rapidamente para o início ou o fim. Um marcador de rolagem CSS é diferente da barra de rolagem porque cada marcador é um link que pode representar qualquer item no scroller.

Por exemplo, considere as temporadas de uma série de TV. Em vez de criar um marcador para cada um dos 10 episódios, crie dois marcadores que vão para o início do capítulo.

Esses marcadores não são pontos, eles usam a propriedade content: "Season 1" do pseudoelemento. Os marcadores também podem ser miniaturas, usadas geralmente em carrosséis de galeria em sites de e-commerce ou focados em fotos.

Os marcadores são como links <a> na página, mas têm alguns recursos especiais:

1. Eles incluem um estado :target-current para quando o marcador está visível ou encaixado.
2. A navegação pelo teclado está incluída e se comporta como um focusgroup.
3. A experiência do leitor de tela está incluída e informa como uma lista de guias.

Adicione marcadores a pontos de interesse significativos no seu scroller seguindo estas etapas:

1. Defina o posicionamento do scroll-marker-group como before ou after.
2. Selecione os pontos de interesse com um seletor .carousel .point-of-interest::scroll-marker.
3. Especifique content com texto alternativo acessível de substituição opcional: números, texto, vazio ou uma imagem.

O navegador cria todos os marcadores e os coloca no contêiner do grupo de marcadores. Este exemplo cria um marcador vazio para cada <li>, criando um ponto de marcador para cada item.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

O elemento contido dos marcadores é chamado de ::scroll-marker-group e é criado como um irmão do scroller, assim como os botões de rolagem. Esse contêiner pode ser estilizado e colocado onde você precisar.

Marcadores e botões ao mesmo tempo

Junte os dois e a experiência vai parecer um carrossel, mas com os seguintes benefícios:

• Funciona com o JavaScript desativado.
• Sem hidratação ou dimensionamento lento (reduz CLS).
• Pronto para todos os tipos de animação e gatilhos de rolagem.
• A acessibilidade está incluída.
• Compatível com toque, mouse e teclado.

Faça menos, alcance mais, mais rápido.

Recursos

Nesta postagem, nos referimos a esses recursos como "carrossel", mas as funcionalidades e a utilidade deles vão muito além dos casos de uso do carrossel. Para ter uma visão completa do potencial desses novos recursos, teste a Galeria carrossel e confira outros componentes, como: scrollspy, guias e slides.

• Padrões da Web
  • CSS Overflow 5 (em inglês)
  • Explicação sobre o carrossel
  • Carrossel WAI-ARIA
• Chrome
  • Intenção de envio
  • Galeria carrossel
  • Configurador de carrossel

Configurador de carrossel

Para quem aprende melhor com recursos visuais e interativos, use o Configurador de carrossel.

Ele oferece switches, por exemplo, botões de rolagem, e quando ativado, o carrossel mostrado imediatamente tem botões e o CSS associado usado.

Ele também inclui exemplos de conceitos mais avançados que estão próximos ao carrossel:

• interatividade
• scroll-state
• animação controlada por rolagem
• e colunas de ajuste de rolagem

Galeria carrossel

Um espaço de demonstração para quem quer saber até onde esses recursos podem ir, respondendo a perguntas como "ele consegue fazer X?". Cada demonstração é baseada em um caso de uso encontrado na Internet. Cada demonstração mostra como orquestrar esses botões e marcadores com animação controlada por rolagem, consultas scroll-state() e muito mais.

Curiosidade: o site inteiro não usa JavaScript.

Os exemplos variam de simples a fantásticos, robustos e repletos de recursos. Navegar pela galeria deve ser inspirador, reconfortante e, é claro, inspecionável para que o código seja aceito. Encontre e inspecione @layer utilities para utilitários que podem ajudar você a criar carrosséis.

Aprofundamento

Temos orgulho de como esses recursos se integram bem a todo o HTML e CSS. A acessibilidade de um carrossel CSS é excelente. O desempenho de um carrossel CSS é melhor do que qualquer solução em JavaScript. A experiência do usuário de um carrossel CSS é natural, suave e avançada. No entanto, há maneiras de melhorar.

Traga seus próprios elementos

Já estamos trabalhando para permitir que você adicione seus próprios componentes para botões e marcadores de rolagem. Isso significa que você pode fornecer suas próprias tags <a> com conteúdo avançado, como ícones. Você também pode usar seus próprios botões de várias camadas criados com Tailwind.

Rolagem cíclica

Muitos carrosséis se repetem quando chegam ao fim, como um brinquedo de parque de diversões. Estamos cientes disso e pretendemos oferecer uma solução de plataforma.

Esperamos que você goste desse recurso. Estamos ansiosos para que todos os usuários da Web com "JavaScript desativado" tenham uma boa experiência de rolagem agora e todas as reduções de CLS que podem ser obtidas com o ciclo de vida mais bem programado de um carrossel integrado.

Menos trabalho para você, ótimas experiências do usuário e melhor performance.