O artigo CSS Carousels do CSS-Tricks apresenta uma abordagem moderna para criar carrosséis utilizando apenas CSS, aproveitando recursos recentes como botões de rolagem e marcadores de rolagem, introduzidos na especificação CSS Overflow Module Level 5.

🧱 Estrutura Básica

A estrutura HTML é composta por uma lista não ordenada (<ul>) com itens (<li>) representando os slides:

<ul class="carousel">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <!-- ... -->
</ul>

O CSS utiliza display: grid com grid-auto-flow: column para dispor os itens horizontalmente. Cada item pode ocupar, por exemplo, 40% da largura do contêiner, com espaçamento (gap) entre eles:(CSS-Tricks)

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;
}

🎯 Scroll Snapping

Para garantir que a rolagem pare exatamente em cada slide, utiliza-se o scroll-snap-type no contêiner e scroll-snap-align nos itens:(CSS-Tricks)

.carousel {
  scroll-snap-type: x mandatory;
}

.carousel > li {
  scroll-snap-align: center;
}

Isso proporciona uma experiência de rolagem suave e precisa, alinhando cada slide ao centro do contêiner.

🧭 Botões de Rolagem

O CSS introduz pseudo-elementos ::scroll-button(left) e ::scroll-button(right) para criar botões de navegação sem JavaScript:(CSS-Tricks)

.carousel::scroll-button(left) {
  content: "←";
}

.carousel::scroll-button(right) {
  content: "→";
}

Esses botões permitem navegar pelos slides, avançando ou retrocedendo. No entanto, é importante notar que essa funcionalidade está atualmente disponível apenas no Chrome, conforme mencionado no artigo.(CSS-Tricks)

🔘 Marcadores de Rolagem

Os marcadores de rolagem, semelhantes aos pontos indicadores de slides, são implementados com os pseudo-elementos ::scroll-marker-group e ::scroll-marker:(CSS-Tricks)

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.carousel::scroll-marker {
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
}

Esses marcadores permitem que o usuário saiba em qual slide está e navegue diretamente para um slide específico.

⚠️ Considerações de Compatibilidade

Embora esses recursos sejam poderosos, é crucial considerar a compatibilidade entre navegadores. Atualmente, os botões e marcadores de rolagem são suportados apenas no Chrome. Para garantir uma experiência consistente em todos os navegadores, pode ser necessário implementar soluções alternativas ou utilizar JavaScript para replicar essas funcionalidades.

🔗 Recursos Adicionais

• CSS Overflow Module Level 5 Specification
• Artigo Original no CSS-Tricks

Essa abordagem demonstra como é possível criar carrosséis interativos e acessíveis utilizando apenas CSS moderno, reduzindo a dependência de JavaScript e melhorando a performance e a manutenção do código.