Transição de imagens com CSS3 e JavaScript puro | Code/Drops #26

[@carlosevilacio1350]

Muito, muito (nem sei quantos muito seriam necessários), tentei aplicar esse efeito em um projeto, levei 2 dias inteiros batendo cabeça, dando errado, e vi seu video, curto, prático, bem objetivo e principalmente funcional. Faco questão de inscrito, se puder continuar esse trabalho de ajudar quem está começando, serie muito grato, que Deus lhe abençoe.

[@ideduque5852]

Woww... Muito bom! Grata por compartilhar seus conhecimentos.

[@richardbidin]

Teria alguma diferença em questão de semântica ou alguma desvantagem, se ao invés de usar varias usasse uma com background image vindo de uma array de imagens no .js? Assim elas n fazem download imediatamente (deixando o carregamento mais rápido). O que acham?

[@HerlonCosta]

Código bem limpo e de fácil compreensão, monstro como sempre Maykão!!

[@gefranviana4742]

*Não tinha pensado nisso... em usar a unidade de medida VW no height passei 3 dias quebrando cabeça. Valeu man me salvou. Like e + 1 inscrito.*

[@aasdffut]

Aquela escondida de código no 11:49; me custou 1 dia quebrando cabeça. KKKKkkkk. Mas agora está rodando. Excelente explicação.

[@profgil901]

O jeito mais fácil que já vi até hoje!! Top!!

[@markhoao7999]

Parabéns, vídeo com conteúdo objetivo com clareza e de fácil compreensão.

[@camila.barrosWeb]

Amei e acabei de me inscrever no canal. S2 Hoje em dia só não aprende quem não quer. Abraços

[@gustavop184]

Achei vários tutoriais, mas com as funções praticamente prontas pelo bootstrap e eu não podia usar bootstrap. Esse projeto serviu de base para o meu slider e a lógica é sempre bom ir aprendendo . Obrigado, òtimo conteúdo.

[@rocketseat]

Que shoow Gustavo!! Ficamos felizes em ajudar! Muito obrigado pelo feedback! 💜💜

[@matheusemidio6210]

Cara, você é diferente! Eu estava travado em um desafio, só vi esse vídeo e consegui resolver. Muito obrigado! Conteúdo sensacional

[@rocketseat]

Faaala, Matheus! Que massa! 💜 😍 Valeu demais! 🚀

[@renatocaetano3029]

Muito bom, super bem explicado. To precisando quando a pessoa tocar em cada imagem, leve para um site, face ou instagram....aí salva mesmo, valeu!

[@rafaadesign]

Sensacional... resumiu o code, impecável!!!

[@klsio2380]

Muito foda , você são incríveis

[@lucasfelinto3647]

Você é fera, Maykão!

[@rocketseat]

Ele é TOP né? 💜

[@maykbrito]

Obg brtoher! Tamo junto!

[@abaca538]

Me ajudou muito esse vídeo, ótimo conteúdo!

[@maiconferreira64]

Brother, os cara daqui são de boa demais, parabéns pelo conteúdo

[@pedrovidio]

Dei o like número 1000 hahaha. Parabéns pelo vídeo. Demais

[@rocketseat]

Valeeeeu, Pedro! 💜💜

[@nosdielz]

Aula TOP, gostei muito de ter acompanhado, tudo nos conformes.

[@alessandro9060]

O conteúdo que estava procurando me ajudou muito obrigado

[@eduardohenriquedeassis9729]

Caramba bicho!!! Muito bom! Obrigado por compartilhar o conhecimento. Eu adicionei no #slider img uma margin-left: 100%, e na classe .selected um translateX(-100%), daí deu um efeito de slider bem bacana. Abraço.

[@samuelsillva3156]

Maykão ensina muito!

[@rocketseat]

Demais né? 💜 Ele faz a gente entender tudinho! 💜

[@samuelsillva3156]

@@rocketseat Verdade

[@alves6617]

Caralho mano, muito bom comemorar um script que roda afinal de contas. Obrigado brother.

[@wagnaomoreira3961]

Parabéns Maykão . Muito obrigado .

[@roniepetersondf]

Parabéns. Gostei muito. Show de didática.

[@rocketseat]

Vaaleu, Ronie! Maykão é top né? 💜

[@franciscoaiolfimachine1123]

Cara, muito obrigado, estou fazendo meu primeiro freela para uma floricultura e isso tem me ajudado muito!!!

[@LucasFerreira-vd7mb]

tu é fera demais, pra mim és o melhor!! ótimo conteúdo!!

[@gabrielferreira4948]

Maykão, O Brabo. Camisa 10 da RocketSeat. Valeu pelo conteúdo !

[@maykbrito]

ahahahhahah Vc é fera Gabriel kkk

[@rocketseat]

💜

[@LucasRodrigues-fw5ou]

Maykão é brabo demais! explicação sempre muito clara e dinamica, video espetacular

[@pbpaschoal]

Muito bom! Parabéns mesmo mano, bem didático. Fácil de entender 👏🏻

[@yuriandreidasilva7112]

Esses vídeos são os melhores, o público para aprender o básico é gigante também. Obrigado!

[@rocketseat]

Vaaaleu, Yuri! Produzimos tudo com muito carinho 💜

[@dersonussuale5529]

Mano muito obrigado por partilhar o teu conhecimento connosco (...)

[@ruanvalente7496]

Conteúdo incrível mano como sempre, parabéns cara !

[@rocketseat]

Vaaaleu pelo feedback, Ruan! 💜Maykão arrasa né? 💜💜

[@maykbrito]

Que bom que gostou Ruan ! 🥰

[@minhaconta6922]

Obg pelo vídeo. Uma dica: se vc clicar com o crtl em cima do nome da folha de css ou do script, ele cria automaticamente os arquivos.

[@ianomaciel3619]

Esse sim é o CARA! Meus parabéns e muito obrigado por ter me ajudado hehehe

[@rosilanesarrazin9514]

ai muito obrigada prof :) valeu mesmo :)

[@marcusaasilva]

Muito simples e direto ao ponto!!! Parabéns! Fiz uma versão do seu código com click de avançar e voltar... valeu!! Mas gostaria de saber como fazer essa transição de avançar e voltar usando touch quando estiver navegando em smartphones... é possível explicar ou dar uma referência para resolver?

[@leonardosillva8960]

Muito obrigado Maikão!

[@misaelduarte7600]

Muito bom! ta de parabéns, programação é incrível!! Obrigado por esses conteúdos, são show de bola..

[@rocketseat]

Que feedback massa! Valeu, Misael! 💜

[@Josias90BR]

Boaaa.. ótimo conteúdo

[@jdsantos2008]

Muito bom, muito bom! Obrigado por mais essa aula.

[@farbauth]

Big Mayk, muito bom, fera, parabéns pela didática e pela escolha do material postado! Grande abraço!

[@maykbrito]

Valeu Charles!!! Obg pelo feedback

[@rocketseat]

💜

[@kevinalves5791]

Mayk = melhor instrutor

[@maykbrito]

Kevin = 💜

[@rocketseat]

💜

[@paulovinicius938]

Grato pelo conhecimento transmitido.

[@marcelosantana8931]

Muito bom cara! É sempre muito saber fazer as coisas sem uso de alguma biblioteca, porque às vezes nem vale a pena pra um conceito simples! Top de mais essa série!

[@rocketseat]

Vaaaleu pelo feedback, Marcelo! 💜

[@glebsonsantos3341]

Show de bola, ajudou bastante!

[@o-autentico]

Eu estava doido pra aprende isso voce leu minha mente cara, voce nota milll amo voce demais

[@rocketseat]

nós temos certos poderes! hahahah 💜

[@FranciscoViegas1106]

@@rocketseat boa tarde Rocketseat. gostaria de colocar a imagem no meio como é que posso colocar

[@DevBraziI]

Monstro sagrado

[@fabiolopesjunior7641]

Muito Bom, obrigado pela ajuda

[@rocketseat]

Faaala, Fabio! 💜 Que bom que te ajudou de alguma forma! 🚀

[@mrrs8994]

Mayk Brito na área. Você é top!!

[@rocketseat]

Mayão é fera! 💜

[@davirezende2973]

Maykão tu e f***, seu fã

[@geovannafernandes9691]

Ótima didatica. Obrigada!

[@FernandoParmezaniOficial]

Muito bom... valeu pelo vídeo

[@rocketseat]

Vaaleu, Fernando 💜

[@elisiowander1868]

Cara, você é um professor incrível!! Obrigado por existir, brother! kkkkkkk Sou seu aluno no LaunchBase :)

[@michelventura9897]

quando eu crescer quero ser igual ao mayk brito !

[@rocketseat]

Todos queremos!! Mayk é demaaaais! 😍😍

[@pedrobarrosmarzano6675]

Show de bola

[@LeonardoSilva-yj9lg]

Você é o cara Maykão

[@rocketseat]

Maykão é incrível, né? 💜

[@LeonardoSilva-yj9lg]

Sem dúvidas ♥️

[@valdineidossantos]

muito bom seu conteúdo

[@rocketseat]

Vaaleu, Valdinei! 💜

[@LeonardoRuas]

Bastante útil Mayk. Obrigado!

[@rocketseat]

Maykão arrasa né? Vaaaleu! 💜

[@carlosandre-kq6up]

mestre, parabéns mayk.

[@rocketseat]

Valeeeu, Carlos! 💜 Maykão arrasa né? 💜

[@carlosandre-kq6up]

@@rocketseat dms! tem meu respeito.

[@adevaldosantos3367]

Excelente aula meu querido, só senti uma falta dos controles next e prev rsrsrs

[@alicefortes416]

Muito obrigada, otima aula!

[@kayorenato]

Valew Maykão e Rocketseat por mais essa dica! 🚀💜

[@rocketseat]

Vaaaleu, Kayo! 💜

[@maykbrito]

Grande Kayo!! Tamo junto mano!!

[@grochk4]

Excelente vídeo meu deus

[@fernandofreitas8522]

Caraca, tu é monstro em!

[@R-vn6xw]

Muito bom 🎉

[@JoaoVitor-pc1xn]

brabo demais

[@brunofelixdias759]

brabo demais, vlw

[@andremedeiros9216]

Muito bom!

[@cjsdiniz]

Muito bom como sempre! Parabéns. :)

[@rocketseat]

Vaaleu, Carlos! 💜

[@kauaalbuquerque9337]

no currentImageIndex o que o significa "Index" nesse codigo?

[@jamilsonmelo8138]

Vlw maikāo, muito bom!

[@rocketseat]

Vaaaaaleu, Jamilson! 💜

[@chrystianramos1123]

Muito top Mayk!

[@rocketseat]

Ele é incrível, né? 💜

[@Lindembergz]

Esse canal é insano!

[@rocketseat]

Vaaaleu pelo feedback, Lindemberg! 💜

[@aBugInTheSystem]

ajudou muitissimo! valeuuu

[@jonasfreire5943]

Show de bola !

[@rocketseat]

Vaaleu, Jonas! 💜

[@ffukue]

Muito Bacana parabéns !

[@rocketseat]

Vaaaleu, Akira! 💜

[@nataoliveirasousa5492]

Pessoal, pra não precisar da classe selected quando o slide finalizar o index, basta fazer a verificação do if antes de chamar a função next.

[@pablomelo5230]

Booa Mayk, demais !!!

[@rocketseat]

Ele é fera, né? 💜

[@sundargopaldas3124]

coloquei no projeto as imagens de fundo pelo css, para aproveitá-las , como poderia fazer para utilizar esse mesmo código?

[@gilsonRodrigocwb]

Muito top este conteúdo!

[@rocketseat]

Valeeeeu, Gilson! 💜

[@magusvaa]

se eu quiser colocar dois ou três slides na mesma página como faço a modificação ai...

[@Matt-pd8vm]

Muito bom Mayk vou fazer um projeto utilizando esse código em sua homenagem

[@rocketseat]

Boooa, isso aí Matheus! 💜

[@huehuehuehue3517]

Como faço para fazer um assim so que com um pedaço da imagem na esquerda e na direita?

[@caiosantosvargas]

Parabéns top!!!

[@rocketseat]

Vaaaleu, Caio! 💜

[@guitt-web-code]

mano vc e se mas. Mas um inscrito

[@rocketseat]

Valeu demais, Francis! 😍 💜

[@micheltorelli6144]

Como faço pra aguardar SOMENTE NA ÚLTIMA IMAGEM por um tempo para depois iniciar o looping novamente?

[@thiagoferreiragomes1931]

Há uns 6 meses atrás, eu olhava para um código desse e pensava "como pode ser possível entender isso ?!"... Hoje, eu acho meio que simples até, não é fácil, mas também não é aquele terror que eu pensava que era antes :)

[@irtonsouzamedina4278]

seu comentario me motivou mano

[@teotoniaeduardo4180]

Muito obgda. Es o maior

[@victtorcesar1681]

E para adicionar um texto que desapareça junto com a imagem?

[@ricardotenorio5624]

Top demais!!!

[@rocketseat]

Mayk arrasa né? 💜💜

[@shiroyasha4001]

Eu tô precisando de ajuda. Preciso criar uma classe que contenha uma imagem e caption, então não posso criar diretamente do HTML, e isso está me empatando, pois não encontro exemplo nenhum na Net. Também preciso criar um array com instâncias da classe, mas inserir diretamente do HTML através da tag , por meio de métodos (a forma que eu pensei)

[@heitorleandro3500]

Obrigado cara!!! Show d+. Não sei quantos vídeos de carrossel ou slideshow eu já vi e não dava certo ou não funcionava pra mim porque já tenho as imagens no html e teria que puxar pelo css ou javascript mesmo e eu não queria ter que mudar isso. Dessa maneira é bem mais simples porque posso adicionar imagens no html sem precisar mexer em mais nada no javascript. Para fazer um carrossel (carousel) com botões e bullets ainda é nível iniciante ou complica muito? Eu sei que preciso de button (next e prev) no html, position absolute para eles no css e adicionar o evento onclick no js. Se usar essa mesma lógica de add e remove class no onclick funciona? Como eu faço isso? kkk Os códigos do Bootstrap e Materialize funcionam mas eu não quero usar código pronto.

[@fmaiscomercial]

Olá amigo, obrigado por compartilhar o conhecimento! Poderia por gentileza orientar como substituir a IMG por uma DIV? Neste caso seria possível colocar mais de uma imagem dentro do mesmo, ou até mesmo que sabe um outro objeto. Se não for possível, poderia ao menos orientar como exibir mais de uma imagem (por exemplo para ir passando de 2 em 2) ? Estendo essa questão aos demais que verem a pergunta, desde já agradeço muito! Que Deus os abençoe.

[@wlr6210]

Boa tarde, como replico a div? Para ter o mesmo efeito em 2 divs ao mesmo tempo

[@casimirojogador]

muito jóia o video, estou aprendendo. Queria saber como faço pra por tempo em cada banner separadamente?

[@rafael98php]

Muito bom.

[@rocketseat]

Valeeeeu, Rafa! 😍

[@luizhorizonte]

consigo inserir esse código no blogger?

[@marlucecarvalho1497]

Criei um topo no meu HTML e coloquei esse slider mas quando rolo a barra de rolagem da página as imagens do slider aparecem em cima do topo. Alguém sabe como resolver isso?

[@AdriiPing]

Muito top!

[@rocketseat]

Vaaaleu, Adri 💜

[@gatochato4349]

você sabe ensinar cara