Como criar um SLIDE CARROSSEL com HTML, CSS e JS

olá para Game Maker seja bem-vindo ao intelegia meu nome é Bruno Rodrigues e nesse vídeo a gente vai aprender a criar um slider para você colocar aí no topo do seu site Se liga só nesse projeto aqui temos o nosso slide eu Observe como ele é funcional tem um slide um aí passa depois de um tempo para slide 2 depois de um tempo vai aparecer lá de três E além disso esses botões nessas bolinhas aqui embaixo também funcionam ó a gente consegue ir para slide 3 ou para slide um direto enfim a gente vai aprender a fazer esse projeto aqui nesse vídeo utilizando HTML CSS java script vem comigo que no caminho eu te explico como criar um slide como esse aqui muito bem logo de cara é muito importante que você já tem aí salvo as imagens que vão conter no seu slide nesse meu caso aqui ó Eu tenho seis imagens uma para desktop e a outra para mobile Porque sim esse slide também é responsivo e as dimensões da imagem de desktop aqui no meu caso é 1. 800 pixels de largura por pixels de altura e o de mobile é 1040 pixels de largura por 600 de altura as dimensões vão variar de acordo com seu projeto mas eu recomendo que para esses slide tenha essas dimensões mas bora lá bora começar a dar logo embaixo do riller do seu site né você vai escolher aonde vai ficar o slide aí no seu site mas eu recomendo que seja logo no topo abaixo do menu a gente vai criar uma section essa section vai ter uma classe que aqui no meu caso vai ser slider dentro dessa section a gente vai criar agora uma Dive essa Dive vai conter todo o conteúdo do nosso slide Então vou criar aqui uma dívida com a classe slider contente lembra que do slide contente eu vou começar inserindo o conteúdo que vai ter no meu slide para começar eu vou inserir três inputs do tipo rádio porque três porque eu tenho três imagens mobile e três imagens desktop Mas se você tiver quatro imagens Aí você coloca quatro em puts do tipo rádio eles não vão ter uma função visual vão ser apenas uma ponte entre o CSS e o JavaScript para que possa ser feita uma leitura você vai entender já já eu vou adicionar aqui o primeiro input do tipo rádio aí Note que ele já vem com parâmetro name e ID o name dele Pode colocar o que você quiser aqui no meu caso vai ser btn rádio e o ID é que vai ser individualidade de cada um o meu ID do primeiro input do tipo rádio vai ser apenas rádio um aí eu vou pegar essa linha de código aqui do input né o primeiro input tipo rádio e vou duplicar ela duas vezes então apertar outfiti seta para baixo aí beleza já temos aqui os três impudes e a única coisa que eu vou mudar é o id o meu segundo input vai se chamar rádio 2 e o terceiro rádio 3 aí se você tiver mais um rádio quatro rádio cinco e assim vai tem que mudar pelo menos o ID desses impudes os inputs já estão criados agora a gente vai começar a inserir as imagens do nosso slide eu vou criar aqui uma Dive e essa dívida vai ter uma classe A classe que eu vou dar para essa é slide Box só que para essa primeira div eu vou dar uma classe A mais porque a gente vai ter que trabalhar com ela na CSS para que ela fique se movimentando Aí você coloca a classe que você quiser no meu caso aqui vai ser primeiro Só lembrando ó que para distinguir uma classe da outra tem que ter esse espaço entre as classes Tá bom coloca aí de box Dá um espaço e coloca a classe primeiro pra gente distinguir essa primeira dica aí dentro dessa dívida lá de box a gente vai adicionar a primeira imagem do nosso slide Então já chame aí dentro da div até de MG indique Aonde está a primeira imagem do seu slide vou apertar aqui contra o espaço ele vai me indicar que a pasta de imagens ó eu vou chamar o slide do desktop maravilha se você quiser colocar um texto alternativo você pode eu vou colocar apenas slide 1 e um detalhe importante caso você queira que essas imagens virem links né para quando o usuário clicar ser direcionado para uma outra página Aí você coloca essa tag IMG dentro de uma tag de link que no caso é a então você pode fazer assim ó chama aí você coloca o destino do link pode ser o que você quiser e aqui dentro da tag a você coloca a tag e MG E aí você chama que as imagens normalmente nesse meu caso como eu não quero que tenha link eu vou só colocar a imagem pura depois que você chamar a imagem de desktop a gente também vai chamar a imagem do mobile Então vou chamar aqui de novo o control espaço vou ir na página onde tem minhas imagens e vou adicionar aqui ó slide 1 mobile Aí você coloca o texto alternativo o que você quiser aí depois que você adicionou as imagens de desktop mobile a gente tem que distinguir uma da outra porque senão as duas vão ficar aparecendo e não é isso que a gente quer então nessa primeira imagem que tem a imagem desktop eu vou dar uma classe para ela essa classe vai ser apenas IMG desktop e para imagem de mobile eu vou adicionar a mesma coisa vou colocar aqui uma classe e dizer que ela é a MG mobile Aí você coloca essa classe uma diferente da outra para dist Qual é de desktop E qual é de mobile a gente vai fazer essa configuração depois na CSS pronto essa aqui é a estrutura das imagens do slide aí agora o que que eu vou fazer eu vou copiar toda essa estrutura dessa dívida e vou colar aqui ó mais duas vezes porque eu tenho três imagens se você tiver mais ou menos Aí você coloca a quantidade equivalente e qual é a diferença entre elas Primeiro de tudo as duas dívidas que eu acabei de criar elas não terão a classe primeiro fechou Aí você apaga aí a classe primeiro que a gente colocou aqui na primeira dívida apenas a primeira dica tem que ter a classe primeiro não se esqueça disso Além disso eu também tenho que mudar as imagens que vão conter nas outras dívidas né nos outros slides porque tem slide um tem slide 2 e tem que ter imagens distintas nesse meu caso Eu só mudei mesmo o número aqui vou colocar slide 2 e aqui slide 3 e essa aqui é a estrutura das imagens a gente agora vai dar uma olhada para ver como está ficando eu vou abrir aqui o Live server em tempo real e desse uma olhada tá aqui os inputs do tipo rari que a gente criou logo aqui em cima tem aqui a imagem do slide 1 de desktop mobile então a massaroca tá uma coisa horrorosa aqui a gente agora vai começar a mexer para que essa estrutura fique mais amigável visualmente a gente vai voltar para o nosso código porque a gente vai criar ó esses botões aqui ó para fazer a navegação manual entre os slides Se liga só para começar eu vou criar a navegação automática porque se você notar que o seguinte ó sempre que passa de um slide para o outro automaticamente essas bolinhas ficam preenchidas aí a gente vai ter que fazer isso de maneira automática Se liga só como a gente pode fazer isso primeiro eu vou criar uma dívida essa dívida vai ter uma classe e essa classe vai ser Neve alto ou seja navegação automática E aí dentro dessa dívida em navegação automática a gente vai criar mais três gifs Se liga só vou criar aqui uma dívida e vou dar uma classe para essa dívida também essa classe vai ser alto btn um aí eu vou copiar essa dívida aqui e vou colar mais duas vezes aqui embaixo vai ficar nessa estrutura aqui a diferença vão ser as classes como é que é alto btn 1 aqui eu vou colocar auto btn 2 e o último alto btn 3 depois que a gente criar navegação automática agora a gente tem que criar navegação manual Porque aqui no nosso site é original se a gente passa o mouse por cima ele fica preenchido também tá vendo ó quando a gente clica ó ele tem que mudar entende vamos fazer isso aqui agora vamos criar uma outra dívida e também vamos dar uma classe para ela a classe dela vai ser Neve manual eu coloquei manella É neve manual pronto maravilha aí dentro dessa dívida a gente vai ter três labels porque labels porque labels faz referência aos inputs porque Lembra que eu te falei que os inputs vão servir como uma ponte entre CSS e o JavaScript para fazer uma leitura que a gente vai entender depois então a gente tem que fazer uma referência utilizando que a gente criou lá no começo do vídeo que são esses inputs do tipo rádio veja só como é que vai funcionar eu vou criar aqui uma leibol e o primeiro parâmetro que a Labor pede é a referência ou seja essa leba vai fazer a referência aqui em nesse meu caso vai ser esse input aqui você vai copiar o ID que você deu para os inputs nesse caso aqui ó Foi rádio um esse aqui é o primeiro input aí você vai vir aqui embaixo dentro desse for você vai colar o ID do primeiro input do tipo rádio além do for você também vai dar uma classe A classe dessa primeira leibol vai ser apenas manual btn aí eu vou copiar essa lei bom e vou colar ela aqui mais duas vezes porque eu tenho três imagens nunca esqueça disso e a única coisa que eu vou mudar é o foco essa segunda lei boa vai fazer referência ao segundo input ou seja o ID é rádio 2 e a terceira leibol rádio 3 a classe A gente não mexe e olha só essa aqui é a estrutura Nossa HTML com o nosso slide agora a gente vai mexer com CSS só que antes eu tenho que te pedir que você se inscreva aqui no canal eu sei que você tá gostando desse projeto e já já ele vai chegar a uma forma que vai te agradar muito mas se você quiser mais projetos como esse aqui para incrementar aí no seu site você pode estar se inscrevendo aqui no canal e ativando também o Sininho de notificações porque aí você será sempre notificado quando sair vídeo novo Além disso você também pode deixar o seu like apenas com uma forma de retribuição se isso aqui tiver te agradado fechou Bora voltar para o nosso código porque agora a gente vai mexer com CSS para a gente estilizar o nosso slide Maravilha Já estou aqui nas minhas CSS e eu acabei criando ó um arquivo separado da CSS do meu site principal Porque caso eu quero fazer alguma manutenção lá na frente fica mais fácil eu até recomendo que você faça isso também e outra vez importante que eu tenho que te passar é o seguinte a gente vai ser um pouco mais ágil no desenvolvimento aqui da SSS para que o vídeo não fique muito longo então a medida que eu vou desenvolvendo aqui O código vai desenvolvendo também se for o caso pause o vídeo vai digitando igualzinho ao que eu estou fazendo e sempre que for necessário eu vou te explicar o porquê que eu tô fazendo isso né que pode ser uma parte importante para o desenvolvimento do seu slide mas se liga só para começar eu vou chamar a primeira section aqui do meu slider que eu dei a classe de slide Olha só então vou chamar aqui a section que tem a classe slide e vou aplicar as seguintes estilizações primeiro eu vou centralizar ele eu vou dizer que o margem dele é zero alto e também vou dizer que o idef ou seja largura dele vai ser 100% para que tome todo espaço da minha tela eu também vou dizer que a altura é automática Além disso eu vou zerar o pads vou dizer que o pads dele é zero e eu vou indicar que isso aqui é importante para que ele não crie é pedes adicionais quando tiver em um outro dispositivo né como mobile ou algum outro com alguma tela maior pronto essa aqui é o estilo né da section slider vamos agora fazer o seguinte eu vou copiar essa classe slide content e a gente vai começar a estilizar agora então chamei nessa SSS e aplique o seguinte o ID dele vai ser bem exagerado de 400%, para que caiba todas as imagens dentro e ainda sobre a altura coloque aí alto né você já automática e além da altura você disse que o display é Flex para que uma imagem fique uma do lado da outra uma imagem não uma dica né porque a gente trabalhou com div aqui dentro da slide contente Então eu quero que fique um do lado do outro vamos dar uma olhada aqui no nosso site ó olha lá por enquanto tá assim ó a gente tem slide de um aqui a mostra Mas se rolar Ó tem os lá de dois e se rolar mais ainda tem o celular de três só que note o seguinte ó Acabou criando essa barra de rolagem ó horizontal Tá vendo só isso aqui é horrível cara a gente vai ter que resolver isso aqui agora porque não é o intuito do nosso slide então volte aqui na Sexy slider e ideia que o overflow dele é headen Ou seja que a rolagem fique escondida mesmo que o conteúdo vaso da tela você olha aqui no meu site agora já não tem mais a barra de rolagem horizontal eu tenho aqui esses inputs do tipo rádio né que a gente criou para que faça a comunicação entre o JavaScript e o CSS vamos esconder eles porque eu não quero que eles fiquem à mostra ele para esconder é muito simples ó eu vou chamar essa classe slide contente eu vou dizer que todos os inputs dentro dele que no caso são três fique com um display nome ele fica escondido aí você olha aqui agora no meu site ó a imagem já está encostada aqui no canto e os impulsos estão escondidos Vamos trabalhar agora com a classe slide Box que é que está guardando as imagens do meu slide chame ela aí na sua CSS e aplique o seguinte o ID dele vai ser de 25%. a altura também vai ser automática o position vai ser relative e você vai entender daqui a pouco o porquê e por fim o text online Center se a gente olha aqui agora no meu site a imagem de mobile tá perfeitamente centralizada só que a de desktop não a de desktop ainda tá meio torta tá vazando da tela Bora resolver isso aqui agora ó eu vou chamar de novo a classe slide box e eu vou trabalhar agora apenas com as imagens que tem dentro dela então você chama aí a ponto slidebox com a tag e MG e diga que o ID dele é de 100%.

agora sim ó tá aí perfeitinho a imagem de desktop Centralizado no meu site e a de mobile também ó Acabou tomando todo espaço aqui ficou até com a qualidade um pouco baixa mas já já a gente vai resolver isso seguinte vamos voltar aqui para o nosso código e bora trabalhar agora ó com as bolinhas da navegação automática e navegação manual eu vou começar com a navegação manual Fechou então copia aí a neve manual Cola aí na sua SSS e agora a gente vai dizer que vai ter um position Absolut porque aí ó como é que ele tem um position relativo eu quero que é a navegação manual fica apenas né Trabalhando dentro dessa embaixo eu não quero que ela vaze por alguma razão e Acabe sobrepondo o conteúdo do resto do site veja só como funciona isso na prática eu vou dizer que o líder desse Neve manual é de 100% e que a margem top Ou seja a distância do Topo seja de 35%, Esse 35% foi um valor que eu testei aqui e funcionou para mim se porventura quando você concluir o slide do seu site e os bullets né as bolinhas ainda estiverem em cima da imagem muito distante dela aí você pode aumentar ou diminuir essa margem top e que além disso O justify content seja Center para que elas fiquem centralizadas aqui por enquanto a gente não vai ver nada porque a gente não deu cor para elas ainda a gente vai dar cor para elas agora então aqui na sua HTML a gente tem aqui a neve manual que é a classe E também temos a manual btn Então já copia aí a classe manual btn e na CSS chame de novo a neve manual e chame agora classe manual btn bora começar a estilizar aqui no nosso site original Note que ela tem apenas a borda o fundo é branco né o transparente Então bora fazer isso eu vou dizer que tem um border de um pixel sólida e a cor vai ser essa aqui ó você coloca a cor que você quiser eu tô usando essa porque foi a cor que eu utilizei lá no site original eu também vou querer um padim para essas bolinhas que será de 10 pixels Além disso também quero que ela fique redondinha né um círculo perfeito por isso eu vou dizer que o borders dela é 50 por cento e que o cursor seja Pointer para quando o usuário passa mal por cima virar aquele dedinho Bora olhar como está ficando ó eu acredito que a gente não vai conseguir ver é exatamente a gente não vai conseguir ver porque ó elas estão bem aqui tá vendo só que como a gente colocou é bem em cima da imagem do slide de mobile a gente não tá vendo bora fazer o seguinte vamos logo esconder essa imagem de mobile aqui do nosso slide e para esconder é muito muito simples vem aqui na index HTML e você lembra que a gente criou essa classe aqui para as imagens ó IMG mobile então Copie essa classe aí vem aqui no seu CSS e você lembra que a gente escondeu os inputs do tipo rádio né a gente disse que o display é nome vote aí para essa declaração e faça o seguinte adicione uma vírgula depois que você chamou aqui o input e cole essa classe aqui ó e MG mobile pronto A partir de agora as imagens de mobile estão escondidas você olha aqui no meu site Olha lá só tá aparecendo de desktop muito massa né E aqui estão as nossas bolinhas ó Note que elas estão muito próximas uma das outras ainda não tem vida nenhuma eu vou querer que ela se afastem uma da outra mas note só o código que a gente vai fazer esse código aqui é um pouco diferente do que a gente tá habituado a trabalhar é o seguinte eu quero que todas as bolinhas ganhem um distanciamento ou seja uma margem do lado direito menos essa última bolinha aqui porque se ela ganhar um espaçamento do lado direito ela vai ficar deslocada vai ficar assim torta Então olha só como a gente faz isso na CSS eu vou copiar ó essa declaração que eu fiz aqui em cima ó Neve manual ponto Neve btn e vou colar aqui embaixo aí depois que eu colar eu vou adicionar dois pontos e vou digitar note Esse é o pseudocci aqui ó note só que esse note ele tem um abre e fecha parênteses E aí o que que eu vou dizer aqui agora ó eu quero que todos os elementos que tem a classe Manual btn tem o seguinte estilo menos o último menos a última bolinha então eu vou dizer aqui dentro desses parênteses o seguinte ó digite aí dois pontos e escreva last shield ou seja o último filho né A última opção a última classe que possua essas configurações aqui então eu vou dizer que ela tem margem right de 10 pixels apenas você olhar aqui no meu site ó tá aí todas elas estão uma afastada da outra menos essa última aqui que não ganhou essa margem do direito e além disso quando passar o mouse por cima eu quero que ela fique com a cor de fundo da cor da borda para fazer isso é muito simples você vai chamar novamente essa ponto Neve manual ponto neve detn aqui embaixo vai colocar dois pontos e digitar cover quando o usuário passa mal por cima vai acontecer o seguinte eu quero que tenha um background color dessa cor aqui que é a mesma da borda aqui de cima vamos dar uma olhadinha lá olha lá já tá mudando de cor quando eu passo o mouse por cima só que tá muito seco Bora colocar uma transição aqui onde tem neve manual ponto Neve btnis tem as pseudoclasses eu vou vir aqui adicionar um transition de um segundo acho que um segundo tá massa vamos olhar lá ó você passa a moto por cima agora é para estar mais suave ó tá vendo ó já ficou muito suave só que tá muito lento vou diminuir aqui um pouquinho vou colocar 0. 2 segundos deixa eu dar uma olhadinha aqui ó tá lá aí agora já tá algo mais rápido e mais agradável de se ver e além disso nós também temos a navegação automática exatamente a mesma coisa da navegação anual muito simples né E a gente vai precisar digitar mais nada olha só copia aí a classe Neve Auto vem aqui nessa CSS E aqui onde tem neve manual você vai colocar uma vírgula e vai chamar essa classe aqui de novo ó mesmo estilo sem mudar nada a mesma coisa será aplicada para as dívidas que tem dentro de Neve alto então ó faz o seguinte volte aqui nessa SSS E aqui onde tem neve manual. net btn né sem a pseudoclass você vai colocar uma vírgula vai chamar novamente a classe Neve alto e vai chamar as dívidas que tem dentro dela e pronto estilização tá feita é assim que a gente vai trabalhar com a navegação automática só um detalhe importante ó tá vendo que elas ficaram aqui meio emboladas né tá uma coladinha para outra é por causa disso aqui ó a gente não determinou a margem que cada uma vai ter uma da outra muito simples também para resolver depois aqui desse Leste você vai colocar uma vírgula vai chamar a classe Neve alto junto com as dívidas dão control c e cola aqui e chama de novo essa pessoa doclasse note copia toda essa declaração aí ó da control c e cola aqui depois de dívida pronto se eu te olhar lá na nossa site tá lá uma em cima da outra bonitinha muito massa né com isso aqui feito nós já Podemos trabalhar com Java script Se liga só como é simples criar esse código desse slide aqui no HTML a gente precisa fazer uma chamada para o arquivo de JavaScript E você tem duas opções você pode chamar aqui no Ride né no vídeo do seu site ou vim aqui embaixo e chamar aqui logo antes do fechamento da tag Bari só que existe uma diferença Se liga só se você chamar aqui no hit eu vou fazer aqui um exemplo eu vou chamar a script dois pontos src vou indicar Onde está o meu arquivo nesse meu caso aqui vai se chamar apenas slide ponto JS você pode dar o nome que você quiser desde que tenha de ontem JS e é o seguinte se você chamar o script aqui no Head você precisa colocar depois né do nome do seu arquivo o seguinte atributo de fé esse defefé serve para carregar esse arquivo JavaScript Apenas quando todo meu site for completamente carregado Porque na minha opinião não faz muito sentido o arquivo de JavaScript ser carregado sem fazer a leitura do slide que a gente acabou de criar não é então ele só pode ser chamado só pode ser executado quando todo meu site estiver criado se você optar por colocar lá embaixo antes do fechamento da tag bare aí não precisa ter esse de fé fechou vamos lá aqui no meu arquivo de JavaScript eu já vou começar criando uma variável que vai guardar a navegação manual do meu site ou seja quando for clicado né quando clicar eu quero ir com imagem passe de uma para outra e para fazer isso é muito simples ó digita aí o seguinte vá e dê um nome para sua variável no meu caso vai ser apenas rádio coloca o sinal que significa recebe né no JavaScript e na maioria das linguagens de programação aí você vai digitar depois do igual o seguinte documentos abre e fecha parênteses e digita aspas simples dentro das aspas simples a gente vai adicionar essa classe Aqui ó manual btn aí eu vou copiar essa classe manual btn que é da Label da navegação manual e vou colar aqui dentro só que com um ponto da mesma forma que a gente trabalha com CSS Pronto já guardei a navegação manual dentro de uma variável agora a gente vai começar a criar a estrutura do nosso código Pronto já guardei aqui a navegação manual dentro de uma variável agora eu vou querer ter certeza que um dos inputs do tipo rádio estejam marcados quando o documento JavaScript for carregado porque né convenhamos vai ter uma imagem aparecendo logo de cara assim que usaram entrar no site e essa imagem vai ser a primeira então a ideia aqui é que o input o primeiro saúde do tipo rádio já esteja marcado logo de cara e a gente vai criar essa marcação dinamicamente e para criar muito simples ó digita aí o seguinte document.

gat Element byed digita assim ó igualzinho como tá aqui respeitando as letras maiúsculas aí eu vou abrir e fechar parênteses e adicionar aspas simples e eu vou capturar o ID do meu primeiro input do tipo rádio que no caso é rádio um porque eu quero que o rádio 1 já fique né marcado quando o site for carregado aí depois que você chamou aqui o ID rádio 1 você digita um ponto e vai digitar dessa forma que eu escrevi aqui para verificar se ele está marcado né checado aí depois desse ponto tcheca de coloque igual e diga que é true Ou seja eu estou dizendo que esse rádio um vai estar marcado Eu quero que seja verdadeiro a possibilidade dele estar marcado ou seja o primeiro impulso está marcado dinamicamente viajava script simples assim para ter certeza que isso aqui funcionou vote aqui na sua CSS ó Sobe aqui e onde você colocou display None no input você vai silenciar coloca um comentário ou apaga a linha de código aí vem aqui no seu código e dá uma olhada tá aqui marcadinho bonitinho vou até dar um zoom para você ver melhor tá vendo aqui no canto ó o primeiro imput está marcado se eu botar aqui no meu java script e tirar essa linha de código se liga lá nenhum input está marcado então tenha certeza que está tudo funcionando agora a gente vai trabalhar com o tempo que as imagens vão ficar à mostra lá né porque o slide tá lá aparecendo aí depois de um tempo ela passa para outra imagem depois de um tempo passa para outra imagem a gente vai determinar isso aqui agora utilizando a função sete intervalo dá só uma olhada como a gente declara isso digite aí ó sete interval com o i maiúsculo abre e fecha parênteses e dentro desses parênteses você vai abrir e fechar parênteses novamente aí dentro desses parênteses internos Você vai sair e ficar apenas ó dentro do tá vendo aqui Onde tá meu cursor Se liga só que você vai fazer depois disso você vai colocar um igual e colocar um sinal de maior que essa aqui é uma função do tipo flecha né uma função uma não vou entrar nos detalhes do porquê que a gente está usando isso bora só continuar acordando aqui aí depois que você colocar esse igual sinal de maior que abre e fecha a Chaves e quebra a linha tá bom dessa forma aqui que eu fiz ó tem que estar aqui essa chave e esse parênteses na linha de baixo aqui dentro desse set intervalo eu vou chamar a função responsável por passar uma imagem para outra essa função eu vou chamar apenas de próxima e MG e colocar um abre e fecha parênteses porque é uma função que eu estou chamando que a gente vai declarar já já aí depois que você chamou a função você vai vir aqui ó Depois dessa chave e antes de fechar o parênteses ó Onde está o meu cursor bem aqui no meio você vai colocar uma vírgula e vai determinar em quanto tempo quer que uma imagem fique Evidente no meu caso eu quero que ela fique 5 segundos né que mostre a imagem Depois de 5 segundos passe para a próxima então se eu quero 5 segundos né que uma imagem passe de uma para outra eu vou digitar aqui ó 5. 000 só isso aqui se você quiser que leve 10 segundos Aí você coloca aqui ó 10. 000 que é que leve apenas um segundo coloca mil nesse caso eu quero que seja apenas 5.

000 que eu acho que tá de um bom tamanho Pronto já determinamos o intervalo de passagem entre as imagens agora a gente vai criar essa função aqui ó próxima e MG e para criar uma função é muito fácil Se liga só você vai vir aqui fora né do site intervalo né a gente já trabalhou com ela e vai digitar function você vai dar um nome para essa function e para download tem que ser exatamente igual o nome que você declarou aqui para chamar a próxima imagem nesse meu caso é próxima IMG e tem que ter ó esses parênteses aqui se não tiver parênteses não vai funcionar depois desses parênteses eu vou abrir e fechar Chaves e aqui dentro eu vou colocar uma espécie de verificador para ver que imagem está para que vai passando sempre de uma imagem para outra eu vou precisar criar um contador esse contador eu vou vir logo aqui em cima onde tem a variável do tipo rádio e embaixo dela eu vou criar uma outra variável que vai se chamar apenas conte vou colocar sinal de igual para dizer que recebe um valor e o valor que esse conte vai receber é apenas o número 1 porque eu quero né que o contador comece no número 1 porque vai ser a primeira imagem a gente vai entender isso aqui agora então logo de cara eu quero que quando essa função próxima IMG for chamada eu quero que esse contador ganhe um valor a mais ou seja se ela for chamada aqui agora que o contador trabalha dois se for chamar de novo o contador vale a três e se ele for maior que três eu quero que ele volte a valer um Deu para entender como funciona é muito simples a gente declarar isso primeiro eu quero que o contador ganhe mais um valor para fazer isso eu vou fazer um incremento Vou digitar aqui ó conte mais mais só isso aqui mesmo aí depois que eu digitei esse conte mais mais eu vou fazer uma verificação de quanto esse Quanto está valendo porque se ele vale mais que três eu não quero que ele vale a quatro porque se valer quatro vai ficar apenas uma imagem em branco lá no meu slide e eu só tenho três imagens então eu quero fazer uma verificação para sempre que esse conte passar de três quero que ele volte a valer um simples assim para fazer isso eu vou utilizar a estrutura de verificação E então digite é o seguinte ó abre e fecha parênteses conte for maior que três ó a estrutura é essa aqui ó se conte for maior que três Eu Quero que conte volte a valer um olha só essa aqui é o if que a gente vai criar muito simples aí depois que você fez essa verificação a gente também vai mudar o fundo das bolinhas dinamicamente e para fazer isso você vai fazer o seguinte copia essa linha aqui de cima que você disse né que quer o primeiro rádio né o primeiro input do tipo rádio marcado você vai copiar essa linha e vai vir aqui dentro da fanction próxima e MG e vai colar ele aqui dentro fora do IF 70 isso aí viu Tem que ser fora do IF e a única mudança que você vai fazer é o seguinte tá vendo aqui onde tem escrito rádio 1 Apaga esse número Deixa apenas rádio aí aqui fora das aspas simples eu vou querer fazer uma concatenação eu quero que esse rádio se junte ao valor do conte porque lembra que a gente tem aqui né rádio dois rádio três se eu tirei o número desse rádio não existe esse é de lá mas eu quero que esse valor aqui esse rádio ganha um número a medida que o conte vai mudando o conte vai valer dois então eu quero que aqui Fique rádio dois depois ele vale três aí eu quero da Rádio fique rádio 3 e para fazer isso você faz o seguinte digita aí mais e digita a palavra conte esse daqui é o nosso código de JavaScript simples assim só que se a gente olhar aqui no nosso código note o seguinte não tem nada funcionando né Deixa eu tirar esses um aqui não tem nada funcionando as bolinhas não estão passando de cor os slides não estão passando isso porque a gente tem que mexer mais em alguns detalhes dentro do CSS Olha só como é simples o que a gente vai fazer volte aí no seu código HTML e copia aqui ó o ardido o primeiro input que no caso é hard 1 aí aqui nessa CSS chame esse aí de através de uma hashtag não se esqueça disso e cola o ide aí aí depois disso você vai adicionar dois pontos e vai digitar ou seja vai verificar sempre que esse radinho estiver marcado e quando estiver marcado Eu quero que aconteça o seguinte digite aí tio Sabe aquele assunto tio você digita aí agora depois desse chat aí aqui depois desse você vai pegar essa classe aqui ó você vai pegar o Neve alto copia aí Cola aqui na sua CSS com um ponto e depois disso você vai chamar essas classes que tem aqui dentro das dribles Auto btn 1 aí eu vou dar control c e depois vou dar control V aqui depois do Neve alto maravilha o que significa essa linha de código simples ó quando o rádio um estiver marcado Eu quero que aconteça algum fenômeno com esse auto btn aqui que fenômeno vai ser esse mudar cor de background Então eu quero que sempre que o rádio um estiver marcado que o background color desse alto btn1 mude de cor para essa daqui simples aí depois que eu fiz isso eu vou copiar essa linha de código porque eu tenho que fazer a mesma coisa para as outras duas bolinhas aí eu copio aqui e vou colar nas duas vezes e a única coisa que eu vou mudar são esses números aqui ó quando o rádio 2 estiver marcado Eu quero que o alto btn mude de cor também a mesma coisa para o rádio três para deixar seu código ainda curto você pode deixar tudo isso aqui ó na mesma linha depois aqui desse alto btn 1 coloca uma vírgula e digita essa mesma linha de código aqui ó só que para o rádio 2 e a gente pode fazer a mesma coisa para o raio 3 ó sempre distinguindo por vírgula aí esses dois aqui não será mais útil é o seu código fica com mais espaço né fica mais econômico tem gente olha que agora no nosso site ó tá aqui ó a terceira bolinha marcada ele tem que vir aqui agora para o 1 aí depois de 5 segundos ele vem para a bolinha 2 Olha aí tá vendo aí depois ele vem para bolinha 3 sem problema nenhum as bolinhas já estão funcionando porém as imagens não estão passando isso porque a gente não configurou isso aqui ainda a gente vai mexer isso com a CSS Se liga só como é simples fazer isso e é o seguinte ó eu vou chamar de novo aí de dos inputs né ou seja rádio um e sempre que o rádio um estiver marcado Ou seja checket eu quero que aconteça o seguinte digite aí tio né de novo ó tem que ter esse tiozinho aqui para indicar que vai acontecer alguma coisa com certo elemento e eu vou pegar aquela classe que a gente deu aqui para nossa primeira dica lembra que a gente deu a classes lá de box mas para apenas uma a gente deu essa classe especial aqui ó primeiro aí eu vou copiar essa classe Primeiro vou vir aqui no meu CSS e vou colar aqui ó eu quero que essa classe primeiro tenha um margem left de 0%. Porque se é o primeiro rádio que está marcado é a primeira imagem que está aparecendo e esse primeiro nessa classe primeiro faz referência a primeira imagem só que quando ele estiver no rádio 2 aí eu quero que a primeira imagem já saia né que vai embora e que a segunda imagem fique Evidente aí eu vou copiar essa linha de código aqui dessa vez a gente não pode deixar tudo na mesma linha Copie essa linha de código e cola mais duas vezes aqui embaixo uma para cada imagem se você tiver mais obviamente né Aí você coloca a quantidade equivalente e é o seguinte quando o rádio 2 estiver marcado Eu quero que essa classe primeiro tenha um margem left de menos 25%. o mesmo eu vou fazer aqui ó para o rádio 3 sempre que o raio 3 estiver marcado essa classe primeiro já vai ter um mar de Left de menos 50%.