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

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

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.

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

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.

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

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

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

Muito bom mesmo pra praticar, obrigado!

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 !!

Sensacional! Muito obrigado!

Muito massa! curti demais essa aula!!

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.

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 !!!

Muito bom, didática excelente

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!!!

Explicação excelente !!

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.

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

Muito obrigado pela aula mano

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

Muito bom, ajudou demais!!!

mano salvou aqui valeu, ganhou um inscrito

Ajudou demais, muito obrigado

gostei demais! muito bom

Muito bom o vídeo !

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

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

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

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 ?

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

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.

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

Muito massa

sensacional

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

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

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

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

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!

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?

professor blz uma pena no meu não pegou legal

da onde saiu esses botoes de ceta no ???

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

as imagem não ta aparecendo

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

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

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.

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

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

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

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.

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

Como faz para criar um sistema de looping?

4/10

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

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.