[Reclamação] Crítica e Dica, sobre o Progresso do Curso na Alura

Infelizmente, percebo que mais uma vez o curso optou por uma abordagem mais simplificada, deixando de se aprofundar nos conceitos que realmente fariam diferença na formação dos alunos.

Em vez de explorar a construção de um carrossel funcional com CSS puro, o que seria perfeitamente viável e didático, a solução apresentada ficou parecendo apenas um "copia e cola" de um trecho pronto, sem muita lógica explicada.

O mesmo já havia ocorrido com o menu hambúrguer: seria uma ótima oportunidade para mostrar o poder do CSS utilizando checkbox, label e :checked, mas essa possibilidade foi ignorada.

Acredito que, mesmo que fosse necessário dedicar uma aula só para isso, o mais importante deveria ser a qualidade do ensino, e não apenas a entrega rápida de um resultado visual.

Para quem tiver interesse em criar esse tipo de recurso com CSS puro, compartilho abaixo um exemplo simples de carrossel sem necessidade de JavaScript. E deixo uma dica: o ChatGPT me ajudou bastante a entender cada parte do código — vale a pena perguntar e explorar.

HTML

<div class="carrossel__container">
  <div class="carrossel__livros">
    <img src="imagemDeSuaPreferencia" alt="Livro 1" class="carrossel__livro" />
    <img src="imagemDeSuaPreferencia" alt="Livro 2" class="carrossel__livro" />
    <img src="imagemDeSuaPreferencia" alt="Livro 3" class="carrossel__livro" />
    <img src="imagemDeSuaPreferencia" alt="Livro 4" class="carrossel__livro" />
    <img src="imagemDeSuaPreferencia" alt="Livro 5" class="carrossel__livro" />
  </div>
</div>

Css

.carrossel__container {
  overflow-x: auto;
  padding: 20px;
  scroll-behavior: smooth;
}

.carrossel__livros {
  display: flex;
  gap: 16px;
}

.carrossel__livro {
  flex: 0 0 auto;
  width: 150px;
  height: 220px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.carrossel__livro:hover {
  transform: scale(1.05);
}