Criando Slider com HTML, CSS e JavaScript

[@jeanpietro4411]

cara de todos que procuro esse é o jeito mais fácil, mais bonito e o mais dinâmico... Nmrl parabéns.

[@hamiltoncesarprestesdasilv7659]

Sou novo nesse mundo, aprendi html intermediario e css tbm agora estou no js.script... vou começar hoje esse projeto com vc. mais gostaria primeiro de parabenizar vc pelo esforço e dedicação em ajudar iniciantes como eu nessa jornada. muito obrigado mesmo. seus videos tem me ajudado muito.

[@bellkkkk]

eai hamilton, conseguiu virar dev?

[@R1QUADRADO]

Cara , assisti diversos videos mas o seu foi o unico que me ajudou de verdade , muito obrigado . GRATIDÃO TOTAL🙏

[@gabrielapereira2471]

Estava em desespero procurando como fazer um carousel exatamente com essas bolinhas e encontrei seu vídeo, muito boa sua didática. Muito obrigada

[@IGORRALHAARAUJOGOMES]

top demais, muito didático, estou no inicio de carreira na programação e estou desenvolvendo um site sozinho para uma empresa e esse video foi excelente e eficaz para incrementar no meu código. obrigado!!!

[@Gabriel-kf8qh]

Cara já tava desistindo tentar fazer um slide, o único que consigi fazer, muito por causa da explicação de milhões.

[@marcosfonseca5247]

Sou novo nesse mundo DEV, aprendendo HTML e CSS ... Gostaria de parabenizá-lo pela dedicação em repassar seus conhecimentos tão precioso pra ajudar iniciantes assim como eu. Valeu amigo, seus videos tem me ajudado bastante.

[@Sujeitoprogramador]

Fico feliz demais em saber que está ajudando e evoluindo , tamo junto 🔥🔥

[@JoaoMarcos-vp6dt]

não sou de comentar em vídeos, mas esse mereceu demais, que conteúdo de qualidade, objetivo e funcional, exatamente do modo que quem está precisando de um esclarecimento quer.

[@programandonamatrixdarcker1554]

Muito show, criei para usar em um site que estou desenvolvendo, obrigado Prof. Matheus você é o melhor.

[@roneipereira3508]

A sua didática é muito boa , simples é objetiva ....

[@thiagoprogames6499]

fiz javascript de outra forma mais quase igual, não conseguir nesse kkkk que aula top... let currentSlide = 1; // Iniciar o slider startSlider(); // Função para iniciar o slider function startSlider() { setInterval(function () { nextSlide(); }, 2000); // Altere o valor 2000 para ajustar o intervalo em milissegundos (3 segundos neste caso) } // Função para ir para a próxima imagem function nextSlide() { currentSlide++; if (currentSlide > 4) { currentSlide = 1; } showSlide(currentSlide); } // Função para exibir uma imagem específica function showSlide(index) { // Desmarcar todas as rádio-buttons for (let i = 1; i

[@Wallace_rocha]

Muito obrigado mano.. salvou meu projeto! Oro a Deus pra que continue lhe abençoando e vc continue compartilhando seu conhecimento!

[@xacrinhaoniel8966]

Só comentando para agradecer, não havia entendido nada do que meu professor explicou kkk agora tudo está mais claro

[@alexmacol228]

Excelente! Vi vários videos a respeito inclusive gringos mas esse sem dúvida foi o mais direto ao ponto!!!!

[@miguelback737]

Brabíssmo, professor. Terminando o ensino médio técnico com chave de ouro através deste vídeo.

[@ShandelVMerlo]

Esse cara é incrível, já aprendi bastante coisa e vou poder aplicar em meus próximos projetos

[@ak4mee432]

Cara, tô a 3 dias pesquisando pra conseguir fazer esses slides, krl e tu me ajudou pra krl Man, obrigado viu!! Tô estudando pra ser programador front end, é complicado mas n vou desistir, Tmj! Já vou dar aql like pra fortalecer e me inscrever !

[@KelvenWyllames]

virou front?

[@ak4mee432]

@@KelvenWyllames ainda não irmão, ta tenso conseguir vaga e também continuar focado, mas jajá consigo hehe

[@KelvenWyllames]

@@ak4mee432 fé em Deus que você vai conseguir, irmão!

[@Zeromaiall]

eai conseguiu man??

[@lucasfreitas5941]

Conseguiu ?

[@ViniciusPereira-qw7id]

Eu assisti uns 5 tutoriais diferentes e o seu foi o único que funcionou, além de ter o diferencial do JavaScript, ficou sensacional, agora vou tentar estilizar.

[@PauloHenrique-qi3xr]

conseguiu estilizar? tenho complicações com alterações de como mudar o lugar e a dimensão dele e n sei se esse da pra fazer isso

[@henriqueanunciosonline]

Tutorial muito bom, explica muito bem, da detalhes. Vale muito a pena assistir.

[@TechEvy]

Mágico, lindo, perfeito, eficaz, santo, amovc

[@kemuri-8067]

MUITOOO FODAAAAA! Porem não conseguir da .checked = true no radio1, então coloquei o count como 0, infelizmente uma grande gabiarra pq acaba dando delay no slide1. Pelo menos e so na primeira vez que carrega a page... Muito Obrigado, bem melhor que muito conteudo pago por ai!!!

[@GutierrezMedeiros]

Muito bom cara!!! Rapaz qu coisa linda.Eu sou músico e estou aprendendo algumas coisas dessa área, tenho alguns projetos feitos.Obrigado.

[@congregacaoguerem5826]

10:49 >> Quando eu coloco -40px ele fica 40px acima da imagem. Quando coloco 0px ele fica dentro da imagem, centralizado na horizontal e colado na borda superior.

[@RicardodeSouzaPachecoVaranda]

me ajudou muito em um projeto meu que precisava de um slide, você é brabo!

[@naryaramelo495]

o melhor metodo, sem duvidas, só não estou conseguindo deixar responsivo

[@NSplay.oficial]

que incrivel, amei o video, a explicação que foi excelente, vc ganhou mais um inscrito.

[@vladimirvalentim3119]

Cara incrível da pra fazer ate sem o java script se nao quiser que mexe INCRÍVEL

[@machimelo3310]

Uma coisa que adicionei foi o "border-radius: 0.5rem;" dentro da class "slider" ele deixa a imagem nas bordas boleanas, fica mais legal acredito

[@zeusamorim9531]

Melhor tutorial do youtube, batendo de frente até com escolas grandes aí. Ficou de fuder mesmo, valeu pela força meu brother

[@fey251]

Voce explica muito bem. Vi muitos videos sobre o assunto antes de achar o seu, nao consegui acompanhar nenhum 😂. Gostei de como voce explica o porque de cada coisa. Muito bom o video!

[@pekeenaaa5]

muuuito bom, deu certo em 90% pra mim hehehehe o " #radio1:checked ~ .navigation-auto .auto-btn1 " ficou embaixo da " #radio1:checked ~ .first " e somente o hover é aplicado :/ coloquei uns 4px a mais da "margin-top" só para aparecer a borda, ja que não aplicou o checked selecionado agradeço a aula!

[@esperandooadvento8925]

vc conseguiu? to penando aqui

[@pekeenaaa5]

@@esperandooadvento8925 não resolvi deixei como estava mesmo

[@vicent4686]

Obrigado cara, você me ajudou muito no meu projeto da faculdade

[@Eduardojoao-eb7yr]

gostei muito do conteúdo fiz o css todo utilizando o Sass e ficou sensacional.

[@carvalhoquibato2084]

Consegui refazer todo projeto. Obrigado💯

[@nicolasfelix8366]

voce pode me ajudar, estou com problemas no nome da classe a imagem vem da minha pasta eu passo o caminho ok a imagem aparece mais no htlm a classe slide, e no css classe slide img a imagem não respeita o codigo

[@jonaslima3410]

Muito top o conteúdo! Sem enrolação, direto ao que interessa!!

[@helenamariamascarenhasmasc8020]

Explicação muito boa, muito objetivo, deu-me uma grande ajuda no meu trabalho.

[@iJulioDuarte]

Você não tem noção o tanto que me ajudou, obrigado cara

[@wisleycosta4967]

Ganhou mais um seguidor, muito obrigado pela leveza ao ensinar. Tem algum vídeo sobre como fazer isso aplicado no Django, ou seja, permitir que as imagens sejam carregadas pelo o BackOffice?

[@webradioasasdaliberdadejoi1386]

Baita explicação! Faz mais vídeos assim, pequenos e bem interessantes de recursos que podemos aplicar num site, por exemplo. Grande abraço!

[@mariadapenhajosedossantosm7057]

Amei o trabalho, gostaria sim de ver mais video assim, com esse video você me ajudou muito era tudo que eu precisava.

[@ryzv3240]

Amei, muito bem explicado! O meu não ficou a transição da primeira imagem para a segunda, mas o restante pegou a transição.

[@merola03]

Muito bom!!! Será que rolaria uma parte 2 com uma transição com uma transição do último slide para o 1º sem rolar pelos demais e 2 botões de passar slides laterais?

[@wcorbat]

Antes de tudo quero agradecer pela prontidão em sempre compartilhar seus conhecimentos para quem está começando, principalmente man. Como a grande maioria dos devs aprendem como auto didata, pessoas como você agregam muito no meio e para com os aspirantes a devs... Consegui aplicar o que você mostrou, mas quando vou deixar responsivo o slide, as bolinhas de navegação não acompanham o slide e ficam perdidos no fim da página.

[@mattheussilva4667]

UP!! Aconteceu cmg tbm em um outro slick slider qur fiz, vou fazer esse pra ver se fica melhor, tomara que as bolas ficam no centro

[@mattheussilva4667]

Up

[@mattheussilva4667]

Up

[@mattheussilva4667]

Up

[@luismendes1234]

Excelente vídeo, parabéns pelo conteúdo e obrigado por compartilhar! Sucesso ao canal!

[@Moisespereira-zk2ss]

cara muito bom o teu projeto. Eu comecei a fazer faculdade agora nessa área e é bem complexo pra quem nunca tinha visto, como eu no caso, não é fácil é muito complicado pra quem esta aprendendo pela primeira vez, eu admito, exige-se um desempenho muito alto mesmo, mais com esforço a gente vai desenrolando aos poucos. Espero que vc possa continuar dando uma força com teus conteúdos, ajudando mais ai criando projetos novos e variados. Muito obrigado pela aula me ajudou muito a entender um pouco sobre esses assuntos. Vamos fortalece o teu grupo e se escrever.

[@fernandocoelho1334]

Busco algo assim, mas com certas particularidades. No meu caso as fotos seriam Banner e esse banners vindos a partir de um cadastro diferenciados com uma certa classificação (banner permanente e banner de campanha = temporariamente estariam atuando), funcionando interativo, com tempo maior.

[@lucastoledo5466]

Muito bom. Deu certino aqui.

[@lucca7072]

que vídeo incrível!!! meus parabens, irmao! me ajudou demais a fazer alguns projetos mais elaborados no front. abraços

[@joaomonteiro5038]

Olá parabéns pelo conteúdo show de bola, uma pergunta como fazer para não rebobinar as fotos ao final e deixar na sequencia 1,2,3,4,1,2,3,4 e assim por diante tipo um loop.

[@OFilosofodechuveiro]

salvou meu projeto maninho, muito obrigado!

[@KlosbanR]

Muito obrigado por compartilhar essa aula! Me ajudou bastante aqui em um projeto! 👍

[@jaednilsonvieira214]

muito obrigado!!! me ajudou muito no meu estudo de js!!!

[@mozartpelissari6144]

Valeu, Professor. Didática excelente. Aprendo muito contigo.

[@joaopauloandrade4093]

Gostei mano estou aprendendo html css js vou seguir pra aprender mais

[@nettoaoquadrado]

Adorei o vídeo. Agradeço pelo o conteúdo! Continue com o trabalho. Acesso ao conhecimento de maneira gratuita e acessível é muito importante!

[@hbernardelli]

Muito bem explicado!!! Gostei muito, ta de parabéns!!!! Projeto simples mas funcional!!!

[@sergiomartes5605]

Show demais, grato pela aula!!!

[@generalkuze6893]

Vídeo muito bom, continue assim!

[@PHPedro_]

muito bom mano. Ajudou de mais. +1 inscrito

[@brunosilvateixeira6398]

Tooop parabéns me ensinou algo q eu apanhava muito kkk

[@adrielfilipedesign]

Obrigado, ajudou demais, ja me inscrevi e dei like.

[@eriklegramante3032]

Video muito didadico para entender o conteúdo, está de parabéns boy +1sub

[@ivambergsilva591]

Caramba, muito show! Trabalho incrível, parabéns!

[@Sujeitoprogramador]

Tamo juntoo 🤟👊

[@danielfabricio4568]

Mano, muito bom o vídeo. Me ajudou muito no meu TCC

[@daniellycosta2660]

Sensacional!! Ajudou demais a fazer os slides do Banner do projeto de um e-commerce

[@f.borges4184]

Muito top o vídeo, parabéns 👏🏻👏🏻👏🏻👏🏻

[@rodrigoviana7753]

Rapaz, muito obrigado.... excelente explicação, esta de parabéns

[@Vito_hoo]

otimo video muito obrigado por toda sua dedicação

[@vayneMP7]

Mt bom o video, mas se colocasse transition na div das img nao trocaria de margin mais suavemente? Invez de duro assim

[@liviadasilvasantoss]

Muito Bom! me ajudou muito!

[@leonardodombrosky4581]

show de bola a aula, boa explicacao, top top, só um detalhe que eu acredito ser fundamental, seria voce disponibilizar o exemplo que voce esta fazendo ai, para a pessoa aqui poder baixar, por que ?? porque por exemplo, o meu slide ele nao volta, ele so vai pra frente, nao sei oq acontece, se eu tivesse como baixar o seu exemplo, eu com certeza iria enxergar onde eu errei. O seu exemplo, estaria funcionando 100%, e muiiitos que estao aqui assistindo as aulas, nem sempre vai conseguir alguem pra estar respondendo as duvidas que possam surgir na hora, por isso o exemplo seria fundamental, entao, eu penso que toda a aula dada, seria interessante disponibilizar o exemplo para download, senao, a pessoa, como eu agora, estou com um erro aqui, francamente ja reconferi o projeto umas 20x e nao acho onde esta o erro, se eu tivesse o seu exmplo, com certeza eu iria achar o erro, ia gravar na memoria, entende??, so esta minha queixa, fora isso, suas aulas sao tosss demaissss.

[@fheonix5]

show de bola esse slider mano, sendo sincero para o control C control V é otimo pega aqui o conteudo e usa no projeto, agora que eu não entendi foi nada ali no css kkkk

[@urannooo]

na parte do css, o teu deu erro na hora do ".slider" ? o meu quando coloco ese ponto na frente fica aparecendo como se tivesse errado kkkk

[@fheonix5]

@@urannooo deu tudo certo. Eu que não tenho conhecimento de cas msm

[@santiigas]

Você é 10. Muito obrigado

[@alekysrocha3661]

Opa, que vídeo sensacional, detalhando passo a passo, ajudou muito. Tive um problema na implementação do meu, pois já estou tentando adicionar em um site já criado, está dando o erro Uncaught TypeError: Cannot set properties of null (setting 'checked'). Pesquisei na internet e fala que o arquivo está carregando depois do site, isso procede? Como posso corrigir?

[@ProgramacaoWeb-be6lt]

show de bola muito grato!!

[@renattinhosantosdaluz]

Maravilha, seria possível um tutorial de checkout transparente de pagamento do mercado pago, com essa mesma explicação passo a passo? Abraço.

[@icarovitor8285]

Objetivo, Simples e funcional. mt bom mesmo!!

[@quentipereira9760]

Muchas gracias!! Me sirvió de mucho, saludos desde Uruguay!

[@gsette]

Me ajudou muito. Obrigado

[@adriibeatriz]

Parabéns, incrível ♥️

[@fabioschomaker92]

Show de bola eu fiz com 6 imagens ,agora vou tentar deixar responsivo para fazer uns testes kkkkkk

[@juniiiior1988]

excelente vídeo!! parabéns

[@vitorluisjesusdossantos6633]

Tu é muito bom! Obrigado!

[@willyanbraga1619]

Vc explica muito bem, valeu. Esse modelo de slider funciona bem se for colocado de maneira responsiva?

[@luizaugusto_br153]

Excelente video! Obrigado mano!

[@hendrioevandro6578]

Mano, muito bom! Me ajudou muito a entender!

[@jonatangois]

Bom demais! Claro e objetivo!!!

[@carlosbarros3651]

Parabens...... ficou top

[@luanribeiro8126]

Muito obrigado pelo conhecimento! 😁😁

[@alexpantoja610]

Muito bom gostei 👍

[@rianneris368]

Me ajudou muito !!! Obrigado mesmo

[@beccqa1278]

Parabéns, o melhor que eu ja vi

[@jeffersonbarcellos5599]

Que vídeo sensacional !! Que aula, obrigado.

[@marlinho206]

Ficou top! Teria como fazer o carrossel 100%?, na tela toda?

[@renanandrade6844]

Show de bola, ajudou demais

[@diogocamilo1981]

Obrigado pela ajuda!

[@JoaoHenrique-uz3bs]

Ola, tem jeito fazer isso sem o ?

[@eduardosprangoski7230]

Top demais

[@carlosdiegosilva9008]

Caracas. Esse deve ser o nível de um "Sênior" kkkkk. Muito bom, cara. Vc é demais.

[@onlythejuice]

muito obrigado pelo vídeo, me ajudou muito!!