28º Desafio: Slider - Peso 1

[iurygdeoliveira]

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Ohhh crianças inocentes e curiosas, vocês gostariam de criar um Slider com CSS, JS e HTML? Bem, isso é possível sim!

O Slider é um elemento muito comum em sites, que permite a exibição de várias imagens em um espaço limitado, fazendo com que elas mudem de forma dinâmica, em um determinado intervalo de tempo.

Para criar um Slider vocês vão precisar utilizar algumas técnicas de animação em CSS, e também programar algumas funcionalidades em JS, como por exemplo, o controle de tempo entre as imagens, a mudança de imagem ao clicar em um botão, etc. Abaixo, segue apenas um exemplo, que pode ser alterado conforme a criatividade de voçês.

Exemplo

https://user-images.githubusercontent.com/30157522/224490930-cdace92e-3926-4da8-8946-48b24db40ca9.mp4

Boa sorte, crianças curiosas! Espero ver muitos Sliders incríveis por aí.

Additional tips

Algumas dicas adicionais que podem ser úteis para vocês:

Para posicionar as imagens dentro do slider, use o display: flex; Para criar os botões de navegação, utilize a tag em HTML e aplique estilos CSS; Para controlar o tempo entre as imagens, utilize o método setInterval() do JS; Para fazer a transição entre as imagens, utilize a propriedade transition do CSS; Para adicionar e remover classes CSS com JS, utilize o método classList.add() e classList.remove()

[huannyy]

Equipe: Elektras Turma: 3A de informática desafio 28.zip

[iurygdeoliveira]

Resposta aceita