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.

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

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

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

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

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

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

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.

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

Sensacional! Muito obrigado!

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.

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

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.

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

Muito massa! curti demais essa aula!!

Muito bom mesmo pra praticar, obrigado!

mano salvou aqui valeu, ganhou um inscrito

Explicação excelente !!

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

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

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

Muito bom, didática excelente

Muito obrigado pela aula mano

Muito bom, ajudou demais!!!

Ajudou demais, muito obrigado

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.

Muito bom o vídeo !

gostei demais! muito bom

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

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?

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

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

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

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

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

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

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

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!

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

sensacional

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

da onde saiu esses botoes de ceta no ???

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 ?

Muito massa

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.

professor blz uma pena no meu não pegou legal

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.

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

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

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

as imagem não ta aparecendo

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.