Carrosséis com CSS

Adam Argyle

Publicado em 20 de março de 2025

No Chrome 135, você pode usar recursos da especificação CSS Overflow 5 que foram projetados para criar experiências de rolagem e carrossel.

Esta postagem é uma visão geral de várias experiências de rolagem e carrossel feitas usando esses novos recursos e sem JavaScript. Assista ao vídeo a seguir e se prepare para o que pode ser alcançado.

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

Ainda mais impressionante é a história de acessibilidade.

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

Os elementos de um carrossel são mostrados como uma visualização em árvore de acessibilidade, em que os botões e elementos de guia são claramente indicados para dar uma prévia do que um leitor de tela vai encontrar no carrossel.
Captura de tela da árvore de acessibilidade do carrossel do Chrome DevTools: Demo

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

Um carrossel é uma área de rolagem com até duas affordances de interface adicionadas: botões e marcadores.

Na versão 1 dos recursos de carrossel do 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 correta das guias 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 <a> de navegação com estado 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 controle deslizante

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

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

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}
Uma área de rolagem mostrada sem affordances ou dicas além do conteúdo cortado.

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

Dependendo do sistema operacional, talvez já existam botões de rolagem ao redor das barras de rolagem. Os botões de rolagem integrados tendem a empurrar uma área de rolagem, enquanto os botões de rolagem do CSS ocupam 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 de item por item. Para listas longas de itens em que mais de um item aparece por vez, ele rola quase 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 rolar para a direita.
  2. Especifique content com texto alternativo acessível de substituição opcional.

O navegador vai criar botões reais, com seu conteúdo, como irmãos do controle deslizante. Agora você pode posicionar esses botões, estilizá-los ou anchor() 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;
  }
}
Demonstração

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

Assim como o elemento de rolagem, os marcadores de rolagem do CSS podem indicar o tamanho do carrossel, além de permitir que o usuário passe 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 controle de rolagem.

Como exemplo dessa distinção, 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.

Uma lista horizontal de episódios de TV é mostrada, começando pelo primeiro episódio da segunda temporada. Há dois títulos de lista acima, &quot;Temporada 1&quot; e &quot;Temporada 2&quot;, cada um com setas apontando para eles para indicar que são os marcadores de rolagem gerados.

Observe que esses marcadores não são pontos. Eles estão usando a propriedade content: "Season 1" do pseudoelemento. Os marcadores também podem ser miniaturas, comumente usados em carrosséis de galerias em sites de comércio eletrônico 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 fixado.
  2. A navegação pelo teclado está incluída e se comporta como um grupo de foco.
  3. A experiência do leitor de tela está incluída, e os relatórios são semelhantes a uma lista de guias.

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

  1. Defina a posição 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>, para criar um ponto de marcador para cada item.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}
Demonstração

O elemento que contém os marcadores é chamado de ::scroll-marker-group e é criado como um irmão do controle de rolagem, 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

Juntando as duas, a experiência parece um carrossel, mas tem os seguintes benefícios:

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

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

Demo

Recursos

Esta postagem se refere a esses recursos como "carrossel", mas as capacidades e a utilidade deles vão muito além dos casos de uso do carrossel. Para ter uma ideia completa do potencial desses novos recursos, teste a Galeria carrossel e confira outros componentes, como scrollspy, guias e slides.

Para estudantes visuais e interativos, use o configurador de carrossel.

Ele oferece opções, como botões de rolagem, e, quando ativado, o carrossel mostrado imediatamente tem botões e o CSS associado usado.

Uma captura de tela do site do configurador que mostra um snippet de código HTML de uma lista simples. Em HTML, há quatro opções: botões de rolagem, navegação por pontos, páginas automáticas e inativas. Abaixo dos interruptores, há uma lista de cards, prontos para receber qualquer uma das ofertas de interruptores.
https://chrome.dev/carousel-configurator/

Ele também inclui exemplos de conceitos mais avançados que são adjacentes ao carrossel:

Um espaço de apresentação para quem tem curiosidade sobre o que é possível fazer com esses recursos, respondendo a perguntas como "Ele pode fazer X?". Cada demonstração é baseada em um caso de uso encontrado na Internet. Cada demonstração mostra como organizar esses botões e marcadores com animação de rolagem, consultas scroll-state() e muito mais.

Uma curiosidade: o site inteiro não usa JavaScript.

Uma captura de tela da página de destino da galeria de carrossel. Tem um cabeçalho de boas-vindas, algumas informações sobre o site e uma lista de exemplos de carrossel como links.
https://chrome.dev/carousel/

Os exemplos variam de simples a fantásticos, robustos e ricos em recursos. A navegação pela galeria precisa ser inspiradora, tranquilizadora e, claro, inspecionável para que o código seja usado. Encontre e inspecione @layer utilities para encontrar utilitários que podem ajudar você a criar carrosséis.

Aprofundamento

Estamos orgulhosos de como esses recursos se integram bem a todos os HTML e CSS. A acessibilidade de um carrossel CSS é excelente. A performance de um carrossel CSS é melhor do que qualquer solução JavaScript. A experiência do usuário com um carrossel CSS é natural, suave e rica. No entanto, há maneiras de melhorar.

Use seus próprios elementos

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

Rolagem cíclica

Muitos carrossséis se enrolam quando chegam ao fim, como um carrossel de uma feira. Estamos de olho nisso 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 e que todas as reduções de CLS sejam obtidas com o ciclo de vida melhor programado de um carrossel integrado.

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