COMO FAZER UM CARROSSEL(SLIDER) | INICIANTES| HTML | CSS | JS 

Bom dia! Tudo bem? Tem sim, para isso vai precisar alterar o código para receber dinamicamente os sliders, primeiro de tudo, vamos começar pelo html e css, como será vários sliders queremos reutilizar os estilos, para isso vamos precisar mudar um pouco a estrutura, é importante ler com atenção o passo a passo. 1. ALTERANDO O HTML E CSS ******* TAG ****** Nas tags "" repare que foi adicionado um class="button" essa classe "button" conterá nossos estilos, assim será possível reaproveitar em outros sliders É importante se atentar a duas coisas, primeira dela é que no botão de voltar possui também outra classe, ficando "button prev-button", a "prev-button" é a responsável por alterar a direção da seta, a segunda coisa que é necessário se atentar, é que mesmo após adicionar essas classes, nos mantemos o id="prev-button" e id="next-button", eles serão utilizados no Javascript, quando você for criar o outro slider, basta apenas alterar esse id, colocando, por exemplo, id="prev-button-two" e id="next-button-two" CSS DOS BOTÕES No css, as únicas alterações necessárias são dos seletores, ficando da seguinte forma: ------------------- FORMA ANTIGA ---------------------- #prev-button, #next-button { width: 30px; height: 30px; border: none; background-color: transparent; cursor: pointer; } #prev-button img, #next-button img { width: 100%; height: 100%; } #prev-button { transform: rotate(180deg); } ------------------- NOVA FORMA ---------------------- .button { width: 30px; height: 30px; border: none; background-color: transparent; cursor: pointer; } .button img { width: 100%; height: 100%; } .button.prev-button { transform: rotate(180deg); } OBS: repare que agora estamos usando as classes ao invés do "id", assim permitindo reaproveitar os estilos ******* TAG ****** na tag img, somente será necessário adicionar mais algum seletor para classe, no exemplo, foi adicionado "slider-one": É importante reparar que foi adicionado em ambas as imagens do slider, essas classes são de extrema importância, pois serão utilizadas no Javascript, quando for adicionar um novo slider, você pode simplesmente colocar, "slider-two", e assim sucessivamente, sempre se atentando de adicionar a todas as imagens do slider 2. ALTERANDO O JAVASCRIPT Agora, no javascript, vamos fazer alterações para transformar o código em algo reutilizável, para isso, ao invés de salvar as imagens e nossos botões em constantes de forma global, vamos criar uma função e receber por parâmetros os identificados e inicializar o nosso slider dentro da função, assim se tornando reutilizável: function sliderImages({ classNameSliders, btnPrevID, btnNextID }) { let currentSlide = 0; const slider = document.querySelectorAll(classNameSliders); const prev = document.getElementById(btnPrevID); const next = document.getElementById(btnNextID); function hideSlider() { slider.forEach((item) => item.classList.remove("on")); } function showSlider() { slider[currentSlide].classList.add("on"); } function nextSlider() { hideSlider(); if (currentSlide === slider.length - 1) { currentSlide = 0; } else { currentSlide++; } showSlider(); } function prevSlider() { hideSlider(); if (currentSlide === 0) { currentSlide = slider.length - 1; } else { currentSlide--; } showSlider(); } prev.addEventListener("click", prevSlider); next.addEventListener("click", nextSlider); } sliderImages({ classNameSliders: ".slider-one", // Colocar o nome da classe do slider btnPrevID: "prev-button", // Colocar o id do botão de voltar btnNextID: "next-button", // Colocar o id do botão de avançar }); Repare que todo o código principal permanece o mesmo, a maior alteração que foi feita é que agora é necessário chamar a função passando a classe dos sliders e os ids para ela. Dessa forma é concluído as alterações e o sliders já está reutilizável, basta adicionar outro slider no HTML E sempre iniciar a função no Javascript com as classes e ids // EXEMPLO sliderImages({ classNameSliders: ".slider-one", // Colocar o nome da classe do slider btnPrevID: "prev-button", // Colocar o id do botão de voltar btnNextID: "next-button", // Colocar o id do botão de avançar }); sliderImages({ classNameSliders: ".slider-two", btnPrevID: "prev-button-two", btnNextID: "next-button-two", }); PRINTS PARA FACILITAR COMPREENSÃO: JAVASCRIPT: i.imgur.com/gv9E6L5.png HTML: i.imgur.com/OFgHRKB.png CSS: i.imgur.com/oQQSrUH.png Espero que ajude, qualquer dúvida que ficar, basta comentar que estarei à disposição para ajudar, qualquer coisa também, basta me adicionar no discord, meu usuário é danielfery

Por nada, obrigado pelo feedback, fico feliz que o conteúdo tenha ajudado!

Obrigado!! fico feliz que tenha ajudado.

Obrigado pelo feedback! Fico feliz que tenha ajudado!

Valeu, fico grato! Que bom que ajudou!

Obrigado pelo feedback! Fico feliz em ter ajudado!

Obrigado! Fico feliz que tenha ajudado!

Obrigado!!

Obrigado! Espero que tenha ajudado!

Obrigado!! fico feliz que tenha sido de ajuda.

Eu que agradeço pelo feedback, fico feliz que tenha ajudado!

Obrigado pelo feedback! Isso ai, vai estudando que logo alcança seu objetivo!

Obrigado pelo feedback, fico feliz que tenha ajudado!

Valeuu!! Que bom que ajudou!

Agradeço o feedback Marcos!

Obrigado!! Fico feliz que tenha ajudado!

Por nada, fico feliz que tenha ajudado!

Por nada e Obrigado pelo feedback, fico feliz que tenha ajudado!

Obrigado pelo feedback! Fico feliz que o vídeo tenha ajudado!

Por nada Matheus! Qualquer coisa basta avisar que estou à disposição.

Obrigado pelo feedback, que bom que ajudou! Qualquer coisa basta avisar

Fico feliz que tenha ajudado! Obrigado pelo feedback!

Obrigado!

@@Daniel_Ferreira otaku

Agradeço pelo feedback, que bom que ajudou!

Obrigado!! kkkkkkk

Por nada! que bom que ajudou!

Obrigado pelo feedback! Fico feliz que tenha ajudado!

Obrigado pela sugestão, irei anotar e trazer outros vídeos sobre.

KKKKKKKK

KKKKKKKKK tenta sim, vale a pena

Anotei aqui já, irei trazer sim, obrigado pela sugestão!

Seria sim, você pode criar uma adicionar um setInterval no final do seu documento javascript, dessa maneira: setInterval(nextSlider, 5000) no primeiro parâmetro é passado a função que você deseja chamar e no segundo após a vírgula, é passado o tempo que irá demorar para essa função ser chamada novamente. Print com exemplo: i.imgur.com/6FHYcJW.png Obs: * O tempo é passado como milésimos

Olá! Tudo certo? 1- Testa ver se no seu html o css esta linkado. 2- Vê se a ordem das tags html esta correta, button depois img depois button novamente 3- Confira se no css o estilo esta com o mesmo nome da classe/id Casos ainda continue basta avisar, qualquer coisa coisa o meu discord é danielfery

Olá, casos seja altura você pode modificar o min-height no container-slider casos seja a largura você pode estar alterando no width do container-images

Boa noite devnoob1768! Casos queira mandar o trecho de código aqui nos ou me adicionar no discord danielfery , ficaria grato em ajudar. Tem algumas coisas que você pode debbugar: 1 - Veja se no seu index.html você adicionou o script.js 2 - Casos tenha adicionado confira se está com o atributo defer 3 - confira se o caminho está correto no src="./src/script.js" No final o resultado será algo assim:

Eu descobri qual era o erro de sintaxe, na verdade não pus o >! Fiquei com a cara no chão com um erro tão bobo!😂 muito obrigado pelo apoio e continue a fazer ótimos vídeos como esse!

Boa noite, confere como ta o seu diretório de pastas, casos a imagem esteja na mesma raiz que o html você pode acessar usar "./NomeDaImg.png" por exemplo, para voltar uma pasta se utiliza "../" e assim por diante.

Essa não vou saber te responder, mas acredito que você consegue escrever o javascript e o css da mesma maneira como no vanilla.

Olá, no vídeo não estava utilizando extensão, no css foi o próprio autocomplete da IDE Visual Studio Code, mas existem extensões(IA) que ajudam no desenvolvimento e agilidade, como, por exemplo, copilot, tabnine(gratuito) e entre outras. Como elas formam autonomia gerando o código, para quem está iniciando, pode acabar sendo prejudicial, pois elas podem acabar gerando códigos que o dev não compreende, ou algo que ainda está aprendendo, principalmente em arquivos JS, então por mais que ajudem, casos for usá-las, recomendo, por mais que auxiliem, você ir escrevendo manualmente os códigos, assim você vai aprendendo e desenvolvendo sua lógica. Qualquer outra dúvida basta falar, espero que ajude!

Boa tarde João Pedro, seria sim, no local onde está as imagem atualmente: Você pode adicionar uma div e passar a classe "slider" nela ao invés de usar na imagem, e dentro da div adicionar seus cards, ex: html: Card 1 Card 2 css: .flex { display: flex; gap: 1rem; align-items: center; width: 100%; } .card { display: flex; align-items: center; font-size: 2rem; color: #fff; width: 100%; height: 450px; border-radius: 10px; } .blue { background-color: blue; } .red { background-color: red; } Resultado: i.imgur.com/6IWvswY.png

@@Daniel_Ferreira Muito obrigado

@@JoaoPedro-gd3te Por nada!

Olá Isht-er, teria sim, ao ínves de opacity se alterar para display none e voltar para display flex/block tera o efeito sem a transição.

@@Daniel_Ferreira Entendi, então pelo visto para trocar para display flex ou block e ter a transição vai ser outros 500. Acho que vai ser algo chatinho de se fazer mas no fim é bom para treinar, obrigado.

@@Isht-er Por nada!

Olá, tudo bem? Seria algo nesse gênero? imgur.com/6IWvswY Qualquer coisa me adiciona no discord, o meu usuário é danielfery

@@Daniel_Ferreira nesse estilo mesmo man, só que teria mais um card, ai eu iria colocar em categoria do meu projeto , te adc la discord qualquer coisa te mando video do projeto

Acredito que você esteja se referindo as imagens, é sim possível, basta você adicionar mais tags no seu html, e passar a imagem que você quer utilizar, no vídeo usei somente duas, mas pode passar a quantidade que você precisar ou quiser.

Ata, entendi, você quer exibir mais de um slider por view, por exemplo aparecer produtos de uma vez certo?

Olá, tem como sim, será necessário fazer algumas modificações no código: 1. Passo seria alterar o index.html ficando desta maneira: Na alteração a cima nós movemos a class="slider on" (e o 'on' casos seja o primeiro), para a tag div. 2. Passo adicionar uma div que conterá o nome e a função do funcionário, ficando da seguinte maneira: Kitsuni Funcionária geral E assim é concluído as alterações necessárias no index.html. Obs: se atentar a class="box-title" ela é fundamental, pois será utilizada nos estilos. 3. Passo alterar os estilos do styles.css, vamos começar alterando a classe .slider, será adicionado 3 propriedades novas, ficando da seguinte maneira: .slider { opacity: 0; transition: opacity 0.2s; position: absolute; width: 100%; display: flex; /* Novo estilo */ flex-direction: column; /* Novo estilo */ gap: 1rem; /* Novo estilo */ } 4. Passo, criar um novo estilo para as imagens, ficando da seguinte maneira: .slider img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } 5. Passo, criar um estilo para a div que contém o nome e a função do funcionário. Obs: não se esquecer da classe que adicionamos a ela no passo 2: .box-title { display: flex; flex-direction: column; text-align: center; } Obs: Você pode alterar o text-align, para left, right, para que o texto fique o na direita ou na esquerda, no trecho a cima deixei no centro da tela. Após os passos você terá concluído, o resultado será assim: i.imgur.com/SlebEvO.png Espero ter ajudado, sinta-se livre para enviar novas dúvidas e personalizar os estilos e o html.

@@Daniel_Ferreira perfeito, deu super certo. Muito obrigada!

@@CeliaGuarinelli Não há de quê!

Olá Alexandre, lembra que nos criamos as nossas imagens que estão no slider no index.html, e nas imagens adicionamos a classe slider, algo assim: Para deixar a imagem visivel, passamos a classe "on" nela, o nosso intuito com o javascript é conseguir passar a classe "on" para outra imagem tornando o slider possível, assim entrando na sua dúvida, na primeira linha do nosso código javascript nos salvamos as nossas imagens em uma costante: const slider = document.querySelectorAll('.slider'); // Nessa constante está armazenado todas a imagens do slider ou seja uma Lista de imagens Para passar a classe "on" entre as imagens primeiro nos iremos remover ela de todas as imagens, para isso usamos o slider.forEach(), o forEach executa o código que estiver dentro dele para cada item da lista: - - slider // Nossa Lista - - O "item" corresponde a cada imagem da nossa lista, ficando assim: slider.forEach((item) => item.classList.remove('on')) // Ao pé da letra significa, para cada imagem da lista remova a classe on Obs: A palavra item pode ser substituida por qualquer outra. slider.forEach((image) => image.classList.remove('on')) Espero que essa explicação ajude, se a dúvida permanecer é so me avisar.

Bom dia, você teria que acabar fazendo bastante modificações se for da maneira que imagino, te recomendo assistir esse vídeo, pode ser que seja isto que você busque e se adapte melhor ao que você está fazendo. Vídeo: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7HPsdVQhpRw.html&t

Olá, tudo bem? Posso sim! Me adiciona no discord, é danielfery

Boa noite, tudo bem? Acredito que sua dúvida é semelhante a que o João Pedro estava. Seria algo dessa maneira? i.imgur.com/6IWvswY.png

@@Daniel_Ferreira Exatamente. Queria mudar a quantidade de slides de acordo com o tamanho da tela. Dá certo?

@@gabrieloliveira9702 Daria, você pode usar @media queries para ir manipulando e mostrar mais ou menos dependendo da resolução, mas, casos tenha a possibilidade, eu recomendaria você dar uma olhada nessa lib swiperjs.com/ , pois ela possui um escopo bem grande de personalização ou dar uma olhada em algum vídeo de carrossel de produtos.

@@Daniel_Ferreira Muito obrigado, Daniel. Irei dar uma olhada.

Bom dia, se conseguir me adicionar no discord #5554, ou mandar a mensagem de erro que aparece no console do navegador para que possa dar uma olhada.

@@Daniel_Ferreira aceita a solicitação criei uma conta com o nome nilo

@@higor9055 Escrevi errado, o nick correto é assim #5554

KKKKKK é a fonte que utilizo que deixa eles dessa maneira, mas seria "=>" "++" "===" "--"

Ola, bom dia, perdão a demora, qual erro você esta tendo?

nesse trecho this.nextSlider = function() { this.hideSlider if (this.currentSlide === slider.length - 1) { this.currentSlide = 0 } else { this.currentSlide++ } this.showSlider } this.hideSlider e this.showSlider são funções, o provavel error é que está faltando chama-las this.nextSlider = function() { this.hideSlider() if (this.currentSlide === slider.length - 1) { this.currentSlide = 0 } else { this.currentSlide++ } this.showSlider() }

e no trecho currentSlide = currentSlide + 1 currentSlide = currentSlide - 1 não deve funcionar da maneira que você espera,

Se puder me adicionar no discord fica mais fácil de auxiliar, o usuário é #5554