Como criar um SLIDE CARROSSEL com HTML, CSS e JS

[@edvaldojunior1745]

Caramba! Eu te pedir isso hoje no final do projeto do portfólio que concluir com você, e você já tinha kkkkkk. Sensacional. Vamos a aula. Obrigado!

[@robertopereira5735]

Obrigado pelo tutorial, meu amigo. Para quem não estava conseguindo, como eu, tentem o seguinte: Os inputs tipo "radio" NÃO DEVEM ser colocados dentro de uma div. Devem ser filhos diretos de "slider-content". Espero ter ajudado. Abraços!

[@viniciusdesenvolvedor]

O meu tava dando errado e fiz assim:

[@norghz]

Irmao, não consegui de jeito nenhum, o que faço? a minha caixinha não marca

[@viniciusdesenvolvedor]

@@norghz eu patinei um tempão, mas fui pela ajuda do Roberto Pereira e foi quando consegui do jeito que falei acima.

[@manoelcamargo742]

Boa tarde, seus detalhes são diferenciado na hora da execução Parabéns... obs. margen- left tive que colocar 0, -25% , -50%, estva puxando ao contrario os slider

[@edmilson715]

Cara sua explicação é super fácil de entender, estou aprendendo muito com suas aulas Parabéns!!!!!

[@Kaadu190]

Show, excelente explicação, também pode sugerir para em utilizar a visualização de celular, apertando o F12 assim escolhe até o modelo do dispositivo embarcado!

[@todetrip]

cara, oque tu ta me ensinando de animações nao ta escrito... ja acompanho o canal a um bom tempo e cada vez que preciso de algo me surpreendo do quanto aprendo com você !! sucesso , parabéns e muuuuuuuuuuuito obrigado pelo conteudo !!!

[@samuelbrito1506]

melhor vídeo que eu achei sobre o assunto! você explica de uma forma muito clara e o projeto ficou muito bom!

[@gersuer]

Cara eu to estudando ReactJs e sério, seu canal me ensina TANTAS técnicas simples de fazer, que eu me pergunto por que outros caras não ensinam um jeito fácil como você faz

[@InteliogiaDev]

Fala Gersuer, a ideia do canal é essa, a gente criar nossas própria soluções sem usar atalhos. Depois que a gente domina as técnicas do vanilla, aí podemos usar bibliotecas, mas eu sinceramente prefiro criar minhas própria soluções kkkkkkk

[@amauriferreiradesouza1709]

Procurei e procurei alguma didática que me fizesse entender como funciona o slider (carrossel) e finalmente cheguei aqui! Didática maravilhosa amigo, só assim para eu conseguir compreender rs! Muito obrigado!!

[@InteliogiaDev]

pow mano que massa cara kkkkkk fico muito feliz em ter te ajudado. Sempre que precisar estamos aqui 😁👊🏾

[@gracasantos2893]

😮 eu fico chocada a cada vídeo! Como você ensina bem 🥹. Que facilidade de aprender assim! Obrigada!

[@ABill_743]

Estou aprendendo HTML e Css e nao entedia nada de JS ate ver teu video. Aula muito boa!

[@thiagomanzoni]

ajudou muito... estava com dificuldade de interação... mas consegui graças a suas explicações.

[@devdofuturo]

Cara muito boa sua explicação, gostei que você não é apressado e isso ajuda muito pessoas iniciantes a compreender o que está acontecendo!

[@InteliogiaDev]

Pow q massa q vc tá gostando Zergio, minha ideia é essa msm, ajudar quem está começando pq tbm já tive minhas dificuldades aí quero facilitar o caminho do máximo de pessoas que eu conseguir

[@franciscofelipegamadasilva723]

O vídeo é tão bom que não vi o tempo passar, parabéns pelo conteúdo

[@exe2635]

Ajudou demais, didática pra primata entender, valeu

[@alfredodomingos2219]

Obrigado irmão você me ajudou muito.

[@viniciusdesenvolvedor]

Eu me embananei nas bolinhas do nav-auto, mas transferi as classes tudo para uma div só com as labels e funcionou. Obrigado pela aula!

[@InteliogiaDev]

É tanto detalhe que a gente se embanana msm kkkkkk mas pelo menos funcionou aí, TMJ 👊🏾

[@rodrigoguimaraes9834]

como vc fez mano? to me enrolando também kk

[@emersondebarros9869]

Parabéns. Voce Explica muito bem

[@peterdouglas08]

Cara, estou curtindo muito os seus vídeos. Você tem uma ótima didática e grande tranquilidade para explicar o que sabe. Parabéns! Já deixei mais um like pra vc, abraço! 😊👍

[@InteliogiaDev]

Muito obrigado mano! 👊🏾👊🏾

[@peterdouglas08]

@@InteliogiaDev Não sei se já fez video disso, mas eu te sugiro fazer um video de como fazer os temas claro e escuro, com aqueles botoes (sol e lua) sabe? Acho que ajudaria muito e eu com certeza deixaria um like rs Abraço!

[@samiroliveira7215]

Parabéns, ótimo trabalho.

[@EnroladoPlays]

mano parabens pelo video, eu estava procurando sobre como fazer pois sou iniciante e encontrei seu video, explica muito bem e é facil de entender, video top!!

[@InteliogiaDev]

Que bom que consegui te ajudar, mano! 😉

[@felipevieira5233]

Vc conseguiu fazer o slider?

[@EnroladoPlays]

@@felipevieira5233 sim

[@ronaldzion7097]

sua didática e show. obrigado por compartilhar meu amigo

[@rafaelrasquinho7114]

Cara, tu me ajudou MUITO. Parabéns pelo conteudo e forma de ensinar.

[@InteliogiaDev]

Valeu Rafael 😁 que massa que consegui ajudar

[@ryzv3240]

Show! Fiz e deu certo! Parabéns pelo video!

[@ivanildoqueiroz4926]

Ótima aula #Inteliogia-Dev's Insights

[@lucio_lucio]

Ótima aula, parabéns.

[@tiellyfrance]

Obrigada de verdade, ajudou bastante aqui

[@darklordsupremo]

Sua didática é muito boa está me ajudando muito

[@beatriztabai7859]

Você é maravilhoso!!!! obrigada!

[@InteliogiaDev]

Haha obrigado Bia 😊🧡

[@SNLR2011]

Maravilha de aula, parabéns!

[@MoisesAzevedo-vb2oy]

Excelente!

[@_xt_7973]

cara voce foi o unico que consegiu realmetne ensinar a fazer um carrossel

[@simplificandoamusica8744]

Obrigado pela aula.. muito massa!👏🏼

[@jonathanoliveira7000]

Ficou top em!

[@ViníciusWebdev]

33:55 Se eu tiver mais slides, qual seria a margem?

[@MarcelinoTangueleka]

BOMMM DEMAIS!!!!!

[@RenatoSantos-hc2vm]

que cara bom mano!!! sucesso sempre, ta me ajudando muito

[@Vinicius-ik3he]

Otimo muito obrigado.

[@yararodrigues4758]

Cara te amo, obrigadaaa

[@InteliogiaDev]

Hahaha vlw Yara, fico feliz em ter te ajudado 😁🧡

[@yuri_gimenes]

Cara!!!! Que top!!! Existem outros modos de transição entre as imagens?

[@InteliogiaDev]

Existem sim mano, mas se eu fosse explicar nesse vídeo iria levar uma década klkkkkkkkk futuramente trago outros slides com outras transições.

[@codegobis9628]

MUITO BOM!!!!!!!!!!!!!!!!!!!!!!!!

[@dego0071]

pode me ajudar eu coloquei mais 2 radios e imagens só que só vai até a terceira eu modifiquei todo o codigo coloquei tudo com 5 até no js mas ainda persiste esse erro

[@Marciodan10]

bruno boa tarde, vc tem video de como fazer slide carrossel com noticias que voce possa atualizar de manha e a tarde ?

[@georgeazevedo1068]

Primeiramente quero parabenizar pelo vídeo e gostaria de perguntar, se seria possível usar um vetor para fazer a troca das imagens ao invés de repetir a mesma linha de código. Desde já agradeço e desejo muito sucesso.

[@gustavowestt8618]

otimo video!!

[@antoniosantos7874]

Opa tive uma duvida sobre a parte do Java Script, em que tu declara a variável "radio" colhendo informação do manual-btn, para que serve essa situação?

[@matheusfinamor1111]

Opa, quando vou fazer a seleção manual do meu radiobutton, ao passar para proxima imagem, é mantida a seleção que fiz manualmente (ficando com 2 radiobuttons selecionados), como posso resolver?

[@KellMezin]

mano porque tu não faz live sobre? tem poucas lives sobre s.i hoje em dia

[@otaviosilva458]

a

[@InteliogiaDev]

Realmente não é muito normal termos lives sobre esses assuntos. Penso na possibilidade de fazer isso um dia 😁

[@3zequie7]

Bom dia Amigo, sou iniciante aqui e já tentei e pesquisei bastante, e não consigo de jeito nenhum, adicionar algo pra fazer o slide pausar ao passar o mouse rsrs. Como fazer isso nesse mesmo codigo que vc fez? refiz aqui todinho e nada.

[@diogo_odaraza1658]

como faço pra quando clicar no radio button resetar o tempo de scroll do carrosel ?

[@ferreirasants1185]

As divs auto-btn nao estao desmarcando sozinhas. Permanecem preenchidas. Solved. Os nomes estavam divergente. Obrigado.

[@ricardocezar8372]

No meu site as bolinhas estavam indo ao contrario, Como resolvo?

[@lukedavelyn3138]

è realmente necessário eu ter as mesmas medidas nas minhas imagens? Pois está ficando quebrado... queria uma ajuda. Pois as imagens não passam, pq estão lado a lado e tbm só oque muda são os inputs

[@elreverso9063]

o meu carrossel ta rolando mas fica mostrando a primeira imagem de fundo

[@oque.a.bibliadiz]

fala meu amigo fiz o menu e o slide so que no menu mobile o slide aparece por cima do menu como remover isso?

[@InteliogiaDev]

No menu mobile vc pode tentar usar a propriedade de CSS chamada "z-index" com um valor bem alto tipo 9999 O ideal é que o container do menu mobile tenha um position: relative 😁

[@felipevieira5233]

As imagens precisam ter um tamanho certo para funcionar direito? Pq estou colocando umas mas elas estão ultrapassando o tamanho da pagina

[@InteliogiaDev]

Isso aí Felipe, nesse slide em específico o ideal é que as imagens sejam exatamente do mesmo tamanho que citei no vídeo 😁

[@ArthurMoizes]

to digitando tudo certo ja tentei diversas vezes e sempre sai bugado, alguem pode em ajudar

[@UPEjkl]

o meu automatico nao esta funcionando e eu nao consigo achar o porque

[@kendrickdesign]

gostaria de aprender a fazer a parte que está preta

[@InteliogiaDev]

Fala mano, se vc se refere ao menu, olha o link aqui kzbin.info/www/bejne/p6naoneZfK11a5I Tmj 🧡

[@kendrickdesign]

@@InteliogiaDev Agradeço

[@AlbertoLeite-h4o]

No meu, as bolinhas não preenchem a cor quando a imagem muda

[@InteliogiaDev]

Tem algum erro no seu código mano, recomendo fazer uma revisão e compara com o que foi feito no vídeo kkkkkkk

[@tiagorodrigues-vh7im]

Surgiu mais uma dúvida aqui, estou fazendo um projeto, e acabei colocando o carrossel nele, porém se trata de cães, eu tentei baixar imgs no google e colocar o tamanho parecido com a dos seus slides, mas n ficou bacana, fica sempre maior, e não se comportam da mesma maneira que os slides, tem alguma dica, algum site para pegar imagens, ou que eu possa fazer sliders iguais aos seus ?

[@InteliogiaDev]

Fala Tiago! Então mano, meu conselho é que você utilize as imagens na mesma dimensão que eu citei no vídeo. Todo slide ele possui um padrão para ficar bem enquadrado no site. Então de você colocar imagens de tamanhos variados certamente ele ficará quebrado. Agora caso as suas imagens não tenham a mesma altura você pode estar mexendo no 'height' da classe ".slide-content" e assim encontrar a altura ideal das suas imagens, mas reforço, tente sempre utilizar imagens com as dimensões iguais

[@camilorafael554]

Comigo as bolinhas não se mexem, não sei o porquê apesar que vi e revi várias vezes. Já as imagens sim elas se movem. 🤷

[@tiagorodrigues-vh7im]

cara me respondeu uma duvida, eu sou novo na área de programação, mas mesmo que já tivesse um tempo, é normal alguem iniciante 9 mese ou 1 ano, saber de tudo isso, sem precisar rever o vídeo, tipo pegar rápido, ou é demorado mesmo?

[@InteliogiaDev]

Fala Tiago tudo bem? Então realmente leva tempo, é importante a gente entender que nunca iremos aprender tudo. É humanamente impossível. A questão é q de tanto a gente fazer, praticar e praticar, acaba q fica automático, a gente entende a "lógica", como montar a estrutura, oq fazer e o não fazer. Acredite é igual aprender a dirigir. No começo a gente fica pensando de vai saber o momento de pisar a embreagem, quando passar a marcha... Mas depois de um tempo tudo isso fica automático. Então sim é demorado! Não tente aprender tudo, aprenda a base aí quando vc quiser aprender a fazer algo específico aí vc pode ir no Google kkkk (a gente nunca para de pesquisar códigos no Google)

[@DionisioLucamba]

Bruno, eu sou de Angola🇦🇴 e queria que você me enviasse essas mesmas imagens

[@anniepunk]

Isso só funciona pra um número certo de imagens ou pra imagens., Com texto e com número maior não funciona

[@InteliogiaDev]

Oi Annie, então esse slider funciona sim com várias imagens e com textos também, talvez vc tenha errado algum detalhe dentro do seu código 😁

[@002y]

alguém tem o código css? o meu está com um bug terrível kkkkkkkkkkkkk

[@InteliogiaDev]

Tem o código desse slide no repositório do GitHub mano. O link tá na descrição do vídeo kkkkkkk

[@catorzehyago]

queeeeeeee odio de front-end fiz tudo igual e não funcionou

[@gersonantoniooliveira1874]

boa noite, muito bom o canal. Parabéns. O nome do Canal que ficou difícil de lembrar, não me escrevi da primeira vez, por sorte te achei de novo... lembre-se da URL amigável kkkk - só como sugestão.... O conteúdo maravilhoso, continue assim....

[@InteliogiaDev]

kkkkkk nome é difícil msm, mas quando vc aprende não esquece mais kkkkkk

[@ndowe_1]

me enrolei algumas vezes😅 mas no final consegui, obrigado🦾🦾