Como criar um slider carousel só com HTML, CSS e JavaScript

Conheça meus cursos em www.otaviomiranda.com.br/

[@viniciustorres731]

Para quem está com o problema do slide sempre funcionar normalmente no topo da página, mas ao definir ele no centro da página, clicar nos botões e o slide subir, vou deixar a baixo o código com a solução. items[currentItem].scrollintoView({ inline: "center", behavior: "smooth", block: "nearest" }); Vocês só adicionam o block : "nearest", que meio que ele deixa o slide "fixo". Por padrão o ScrollIntoView ele alinha no topo "start", e ao definir o nearest, ele deixa o slide "mais próximo", isso significa que ao clicar nos botões, mesmo o slide estando no centro, ele não se mexe, mas se o usuário descer a página e ficar visível parte do slide ou só os botões, ao clicar no botão ele leva o usuário ao slide, tornando a visualização melhor.

[@Alexandre-dl3wp]

Fiz o código exatamente como no vídeo, até peguei o link com o código que ele deixou na descrição pra comparar com o meu e mesmo assim meus botões não funcionam, sabe dizer o que pode ser?

[@viniciustorres731]

@@Alexandre-dl3wp Cara, ao certo não sei dizer. Mas normalmente isso acontece por detalhes besta, por exemplo, um hífen que tava no Id, mas não colocou ao chamar no JS. Pode ser vários motivos, o que eu aconselho é você rever todo o código, principalmente a parte que o JS chama as tags do HTML. Ler tudo e ver se encontra, vai testando os códigos no JS no console.log, isso vai te dar um guia do que tá funcionando e o que não está.

[@carinasilverio613]

Muuuito obrigada por trazer essa solução. Eu estava aqui quebrando a cabeça pra tentar descobrir o erro rsrs...

[@DouglasReis98]

Vlw mesmo, cara!

[@Lakke_Edu]

Cara, tive q assistir tudo de novo e depois gui pesquisar elemento por elemento no develop.mozilla, agora q eu encontrei a resolução depois de uma semana eu li esse comentário kkkkkkkkkkkk

[@pedropauloteodoro2602]

Cara seus conteudos são excelentes, esse carousel ficou muito da hora, percebi que minha lógica está uma negação . Vou melhorar até mesmo para outras coisas!! Valeu e sucesso pra tu !!!

[@yanpereira2021]

cara que bom que eu encontrei esse Canal !!! tava doido pra aprender isso. fiquei dias procurando vídeos mas eu nã ocosegui com nenhum, só nesse. Professor, Obrigado !!

😉🫶

[@franciscocleinaldobarbosad8400]

grande Otávio..que massa essa aula meu querido..vc deu um show!

Muito obrigado

[@luisfortini9148]

Sensacional! Muito obrigado!

[@biamiran]

tava apanhando pra fazer isso no meu site, seu vídeo me ajudou demaaiiss! sua didática é excelente, parabéns!🥰

[@eduardolemos867]

muito massa, eu sou aluno de python da udemy, mas tenho muita dificuldade com css, vídeos assim ajudam a exercitar um pouco

[@rodrigorodrigues2934]

Poderia colodar um evento onclick em cada botão chamando funções separadas, quase o mesmo código, só que uma função subtrai e a outra soma. foi oq fiz aqui. muito bom o vídeo!! bem explicado!! like!!!

[@TanakaGamer1231]

Cara muito obrigado pela ajuda, esse efeito dá um destaque bacana

[@pichinel]

Seria interessante se você mostrasse também como fazer para o carrossel mudar sozinho a imagem.

[@robertopereira5735]

Pessoal, como sou iniciante não entendo muito de funções de "callback", "arrow" e etc. Resolvi de uma maneira diferente. Segue código comentado: const buttons = document.querySelectorAll(".buttons"); // variável para fazer referência a todos os elementos com classe "buttons", que são os botões "left" e "right" do carrossel; let currentItem = 0; // Definimos que o item atual do carrossel terá índice igual a zero; const items = document.querySelectorAll(".carrossel-imgs"); // variável para fazer referência a todos os elementos com classe "carrossel-imgs", que são as divs que contém cada imagem do carrossel; const maxItems = items.length; // variável criada para receber o valor do commprimento do vetor "items", ou seja, a quantidade de imagens que o nosso carrosel possui; for (let i = 0; i < buttons.length; i++) { // loop para adicionar um "escutador" em cada botão do carrossel, que acionará a função "buttonClick()" quando o evento "click" ocorrer; buttons[i].addEventListener("click", buttonClick) } function buttonClick() { if (this.id == 'left-button') { // se o botão acionador do evento "click" ou seja, "this", tiver o id "left-button", o "currentItem", que tem como valor padrão 0, será decrementado em -1; currentItem -= 1 } else if (this.id == 'right-button') { // se o botão acionador do evento evento "click", ou seja, "this", tiver o id "right-button", o "currentItem, que tem como valor padrão 0, será incrementado em +1; currentItem += 1 } if (currentItem < 0) { // Se o índice do "currentItem" for menor que zero, queremos que ele passe a receber como índice o valor máximo. Ou seja, quando a primeira imagem do carrossel for o "currentItem", e clicarmos no botão "left-button", queremos que o próximo "currentItem" seja o último item do carrossel; currentItem = maxItems - 1 } else if (currentItem >= maxItems) { // Se o índice do "currentItem" for maior ou igual ao maior índice, queremos que ele passe a receber como índice o valor incial, ou seja, 0. Como efeito, quando a última imagem do carrossel for o "currentItem", e clicarmos no botão "right-button", queremos que o próximo "currentItem" seja o primeiro item do carrossel; currentItem = 0 } for (let j = 0; j < maxItems; j++) { // loop para que quando o evento "click" ocorrer, todas as imagens do carrossel tenham a classe "current-img" removida. Isso garante que todas fiquem opacas (pois a única imagem com opacidade 1/100% é da classe "current-img"); items[j].classList.remove('current-img') } items[currentItem].classList.add("current-img"); // Após garantir que todas as imagens tenha a opacidade de 1/100% removidas, adicionamos a classe "current-img" apenas ao item atual do carrosel, "currentItem"; items[currentItem].scrollIntoView( { // O método "scrollIntoView" garante que o "currentItem" esteja sempre centralizado no container, através da propriedade "inline: center". behavior: "smooth", // Permite que seja suave o deslizamento das imagens no carrossel. inline: "center", }) } Espero que ajude quem não conseguiu entender a lógica por trás dos códigos! Abraços e paz.

[@rauljulio9216]

Explicação excelente !!

[@fernandoi.kobayashi9826]

Seu vídeo ajudou e muito a montar o meu slider, foi a melhor explicação que encontrei. Já salvei e me inscrevi no seu canal.

[@fernandoi.kobayashi9826]

Montei meu slider com 6 imagens, tipo uma linha do tempo, onde o slide corrente fica com uma borda branca. Conforme clico nas setas de direção essa borda branca vai se deslocando e o carrossel vai acompanhando. A última imagem da direita não aparece completamente, fica um gap sendo necessário rolar o scroll para a direita (habilitei o scroll). No scrollIntoView da galeria estou com o inline: "center", bahavior: "smooth". Tentei alterar esses parâmetros mas o problema continua. Achava que era pq as imagens tinham tamanhos diferentes, mudei para imagens com mesmo tamanho, mas o "gap" no final persiste. O que pode estar ocorrendo @Otávio Miranda?

[@RonerVasconcelos]

Muito massa! curti demais essa aula!!

[@pliniojr95]

Obrigado e um like pra você! No meu projeto me deparei com esse problema e seu vídeo me ajudou. Agradeço pelo compartilhamento de conhecimento.

[@matheuschagas9472]

mano salvou aqui valeu, ganhou um inscrito

[@JulioCesar-hn2ev]

Muito massa! Obrigado e parabéns pelo conteúdo meu amigo.

[@neriadrian100]

Muito bom mesmo pra praticar, obrigado!

[@miguelfiais7188]

Muito bom, didática excelente

[@meiryannemartins3719]

Adoro o Otávio! tenho uns 3 cursos dele lá da Udemy... Super indico. Didática muito boa.

Que massa, muito obrigado ☺️

[@Lakke_Edu]

Ensina o mesmo carrossel só q ao invés de passar item por item faz com q ele passe todos os itens da tela, o conjunto de item q tá na tela sai e entre os novos

[@chuvacomusica]

Muito bom! como eu colocaria um grab nesse carrossel pra que no celular eu passe com os dedos sem tocar nas setas?

[@lucascruz9775]

Muito bom, ajudou demais!!!

[@rafaelcarneiro7236]

O professor tá parecendo outra pessoa, agota está fit e com dentes novos. boa aula Otávio

[@Nyck3]

Muito obrigado pela aula mano

[@Gauberkl9]

Ajudou demais, muito obrigado

[@VitorOliveira-br5ts]

Muito bom o vídeo !

[@janarodrigues6452]

Obrigada, e uma pergunta como faço um carrocel com botões da tabela da copa? É para um trabalho do Curso

[@samuelaguiar1433]

Estou tentando replicar o código no VS Code, mas por algum motivo quando chega na parte de testar o "control clicked", ele não exibe a mensagem no console. Não estou conseguindo entender.

[@webmasterdeveloper3793]

gostei demais! muito bom

[@luisjorgemiranda7624]

Caro Otávio, boa noite! Com a oportunidade baixei seu vídeo pra confrontar um pouco dos meus conhecimentos. Mas, acima de tudo, caso não encontre a resposta neste vídeo, gostaria uma dica sobre uma simples page com Menu - Logo - Busca Para desktop os elementos ficam na mesma linha (até aki, td bem - com Menu aparecendo só o 1o item). Mas qdo a resolução muda para mobiles os elementos ficarão um embaixo do outro centralizado, onde o Menu (de três itens ficarão expandidos, só que em 2a linha, ou seja, abaixo do Logo e por fim o campo de Busca). Isto é possível só com CSS? Obrigado!

[@davidbatista6940]

daria de no lugar do foco ser no meio ser na direita ou a esquerda? como?

[@gustavobrianti7256]

da onde saiu esses botoes de ceta no ???

[@wanielle_]

Ele pegou do google e adicionou na tag

[@CarlosAugustoSantucci]

Bom Otávio, como faço para instalar esse HTML, CSS e JavaScript ?????

[@viniciusoliveiraataide5275]

Quando o carrossel está no topo da página funciona perfeitamente, mas quando tento colocar ele no meio de uma página, com conteúdo acima e abaixo quando clico a tela acaba rolando o carrossel para o topo da página

[@viniciusoliveiraataide5275]

alguém sabe como solucionar?

[@danielluizpereira6403]

@@viniciusoliveiraataide5275 O meu também acontece igual

[@HoopThee]

No Java script remova a parte do scrollIntoView, Na div que tem a barra de rolagem (acho que a galery-wraper no CSS vc coloca o seguinte: Scroll-snap-type: x-mandatory; No seu current-iten: Scroll-snap-align: center; Isso vai corrigir o ajuste indesejável da página e simplificar seu Javascript, já que vc não vai mais precisa do [current-iten].scrollIntoView ()

[@ooo_higu]

Quando eu clico nos botões o slide funciona, mas ele vai para o topo da página. Quando ele fica no topo o slide não funciona. A troca de opacidade e de classes nos elementos funciona, mas o slide não funciona. O que pode estar causando esse scroll vertical e o não funcionamento do slide?

[@viniciusoliveiraataide5275]

to enfretando o mesmo problema, acho que é o scrollIntoView que só funciona assim...

[@JonathanGOSantos_]

Tem como bloquear a rolagem para quem está no celular?

[@laurosantos6473]

a rolagem ta afetando a scrolbar da pagina, como posso especificar apenas a scrolbar do slide?

[@luccasgalvan585]

to tendo esse problema tb

[@walney2008]

ola estou estudando javascript, me responda uam coisa, estou acostumado a desenvolver aplicações desktop em delphi/lazarus, bem o usuário final não consegue ver meus códigos, agora javascript o cara vai no navegador e pede para ver o código fonte da página e ve todo o meu fonte, como funciona isso ?

[@PresentedaCegonha]

por que quando ele pos os botoes arrow left e right ja no html apareceram duas setinhas?

[@gabrieljauneribera9931]

teve um corte no vídeo, ele pegou essas setas no google ◀▶

[@HoopThee]

so tenho um problema, como o scrollintoview rolar apenas a imagem e não a pagina inteira? se vc coloca esse carrossel por exemplo no fim da pagina ao clicar ele ira ajustar o container intteiro ao top. pergunto pq coloquei uma função de rolagem automatica e isso ta acontecendo.

[@joaopedroribeirodenovais4955]

cara to tendo esse problema. Os itens ate rolam a pag no efeito carrosel mas a pagina tmb. Tu resolveu isso??

[@HoopThee]

@@joaopedroribeirodenovais4955 No seu galery-wraper Vc tem que usar Scroll-snap-align: center, Scroll-snap-type: x-mandatory, scroll-behavior: smoth. No seu current-iten, você coloca scroll-snap-align: center. No item confere se flex-shrink tá 0 E no seu Java script vc vai ter que mudar a função pra setar, qual item é seu current-iten. Faça algo que verifique mude a classe do item verificando qual item tem uma id (te aconselho a usar Key do .map) igual ao Index que vc selecionou na setinha

[@HoopThee]

@@joaopedroribeirodenovais4955 assim esse carrossel desse tutoria funcionará como se fosse um componente da página independente, e não como o corpo principal. Vai parar de rolar a página junto com ele

[@HoopThee]

@@joaopedroribeirodenovais4955 e mais importante remova o scrollIntoView do Javascript mude apenas as classes dos itens

[@joaopedroribeirodenovais4955]

@@HoopThee Opa blz vlw cara. Espero que de certo aqui kk

[@rcajazeira]

professor blz uma pena no meu não pegou legal

[@Zyx011]

Muito bom!!! só faltou ser responsivo kkkkk, vou tentar pensar um pouquinha pra deixar responsivo

[@HoopThee]

Use unidades de medida no css (em e %) Ao zerar o css da página devina width e height como 100vw e 100vh perspectivamente

[@brunoluizbaptistabento8202]

Eu fiz exatamente como explicado no vídeo, porem a transição entre as imagens não está funcionando

[@walleskalima4041]

conseguiu corrigir? Porque eu estou tendo o mesmo problema aqui

[@josimarisabella]

as imagem não ta aparecendo

[@samuelgarcia5699]

acho que sou seu aluno em todas as plataformas possíveis kkkkkk

[@welingtonsilva4741]

Tentei adicionar 3 slider um em baixo do outro, mas quando vou passando as imagens para o lado ele pula para o próximo slide, como se eles estivessem conectados.

[@mikeiasgt8590]

estou com esse mesmo problema, conseguiu resolver?

[@arthurcesar1037]

Pode ser por causa do nome das variáveis ... ou já olhou isso?

[@dl4818]

Valeu Professor! Uma dica pf: como tornar o carousel de slider automático? Abraço!

[@mateusduarte2992]

com o foreach dele ali acho que se você colocar um setInterval vai funcionar. agora se for no react vc usa o useeffect com setInterval.

[@dl4818]

@@mateusduarte2992 Obrigado! Vou tentar 😉

[@heitoraugusto7628]

Muito massa

[@tiagooliveiragomes4373]

Como faz para criar um sistema de looping?

Hum????

[@tiagooliveiragomes4373]

@ ah, quer dizer o looping ja tem... so que acho meio estranho ver o carrosel passar por todos componentes antes de chegar do outro "lado" do looping. A proposito, muito boa aula.

[@arthurcorona]

adicionei desta maneira : function clickButton() { clickEvent = new CustomEvent('click'); isRight = document.querySelector(".arrow-right") isRight.dispatchEvent(clickEvent); } function carouselRunning() { setInterval(clickButton, 3000) console.log("domLoading"); }

[@davidbatista6940]

em que parte vc adicionou esse?

[@arthurcorona]

@@davidbatista6940 como assim?? no js?

sensacional

[@lebronsky4417]

4/10

[@Eucrksjshsijwsmakh]

Fora q não explicou nada. Não fez passo a passo.

[@hub-edu]

cara, vc viu o mesmo video que eu ?????

[@Eucrksjshsijwsmakh]

@@hub-edu Provavelmente vi sim. Meu comentário tem 1ano, e Provavelmente deve ter sido porq ele não explicou sobre oque faz cada comando. Só colocou e tantoneu quanto vc copiamos os códigos. Programação vai além de copiar, é entender oq cada respectivo código é e quais as funções dele

[@hub-edu]

@@Eucrksjshsijwsmakh entao, eu entendi o codigo e achei bem explicado... o que seria mais passo a passo que isso para voce? Porque eu acho que, para o nivel que voce precisa ter para entender esse assunto do video, ele explicou em detalhes... Fica muito difícil ensinar Integral e Derivada para alguém que não sabe somar....

[@Eucrksjshsijwsmakh]

Pra quem tá querendo aprender, vc NAO AJUDOU EM NADA. Faz um novo e coloca palavras pra classificar mais simples. Quem tá tentando aprender provavelmente tá vendo e fazendo, e colocar palavras complicadas não ajuda em nada. No meu caso, achei horrível pra entender.

[@hub-edu]

por dificil vc quer dizer em ingles? pq as palavras em si tao o mais faceis possiveis!!!!

[@baldinhoebaldasso407]

Quando eu aperto no botão de passar a imagem a página desce um pouco, como eu resolvo isso?