Carrossel - Alternativo (Explicações)

Alura'lunos,

Quero contribuir com uma forma alternativa de gerar carrossel com HTML, CSS e JS:

O carrossel é gerado após utilizar o (overflow: scroll) no elemento que comporta as imagens, sendo assim não é preciso utilizar javascript para tal feito, só será necessario estilizar com o seguintes atributos:

.container__imagens{ display: flex; overflow-x: scroll; scroll-behavior: smooth; background-color: transparent; justify-content: space-between; }

.container__imagens::-webkit-scrollbar { display: none; }

.imagens { margin: 15px;

}

A estilização acima deixa permitira um scroll no eixo X do container e funcionará com o mousepad de notebook ou para mouses com scroll lateral.

Para o uso de botões para deslizar a tela eu criei o acesso ao container__imagens:

 <script>
        const carrossel = document.querySelector('.container__imagens');
        const x = carrossel.clientWidth;
 </script>

Apliquei a função nos botões que coloquei, antes e depois das imagens:

<button onclick="carrossel.scrollBy(-x,0)"  class="arrow-left" id="control" aria-label="previous">&#10094</button>
<button  onclick="carrossel.scrollBy(x,0)" class="arrow-right" id="control" aria-label="next">&#10095</button>

Quero deixar minhas considerações:

Nesse estagio do curso eu não achei interessante utilizar uma biblioteca para fazer esse recurso de scroll. Eu não sou programador ou desenvolvedor front-end, mas só de ler a documentação do javascript eu aprendi e consgui utilizar. Na internet não encontrei nenhum recurso parecido ou aula explicando como fazer de maneira simples, acredito que avancei um nivel com essa logica.

Obrigado!