Criando Slider com HTML, CSS e JavaScript
ฝัง
- เผยแพร่เมื่อ 8 ต.ค. 2024
- Hoje você vai aprender a criar um Slider funcional de forma simples com HTML e CSS
🏆 (NOVA TURMA) Se você quer levar a sua carreira ao próximo nível, criar aplicativos, sites do zero a projetos profissionais e sair pronto para o mercado, então não perde essa oportunidade:
✅ Nova turma Fabrica de Aplicativos (VAGAS LIMITADAS):
bit.ly/fabricad...
👉 Entre para nosso grupo privado no telegram:
t.me/sujeitopr...
👉 Siga nas redes sociais:
/ sujeitoprogramador
![โรงเรียนตอนตี 2 โคตรหลอน..!! [โรงเรียนไดเม่]](http://i.ytimg.com/vi/2MAEMwqVYh8/mqdefault.jpg)
cara de todos que procuro esse é o jeito mais fácil, mais bonito e o mais dinâmico... Nmrl parabéns.
Cara , assisti diversos videos mas o seu foi o unico que me ajudou de verdade , muito obrigado . GRATIDÃO TOTAL🙏
Estava em desespero procurando como fazer um carousel exatamente com essas bolinhas e encontrei seu vídeo, muito boa sua didática. Muito obrigada
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.
eai hamilton, conseguiu virar dev?
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!!!
Muito show, criei para usar em um site que estou desenvolvendo, obrigado Prof. Matheus você é o melhor.
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.
Fico feliz demais em saber que está ajudando e evoluindo , tamo junto 🔥🔥
Cara já tava desistindo tentar fazer um slide, o único que consigi fazer, muito por causa da explicação de milhões.
Só comentando para agradecer, não havia entendido nada do que meu professor explicou kkk agora tudo está mais claro
A sua didática é muito boa , simples é objetiva ....
Esse cara é incrível, já aprendi bastante coisa e vou poder aplicar em meus próximos projetos
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.
Muito obrigado mano.. salvou meu projeto! Oro a Deus pra que continue lhe abençoando e vc continue compartilhando seu conhecimento!
Excelente! Vi vários videos a respeito inclusive gringos mas esse sem dúvida foi o mais direto ao ponto!!!!
Tutorial muito bom, explica muito bem, da detalhes. Vale muito a pena assistir.
Mágico, lindo, perfeito, eficaz, santo, amovc
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.
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
Brabíssmo, professor. Terminando o ensino médio técnico com chave de ouro através deste vídeo.
Muito bom cara!!! Rapaz qu coisa linda.Eu sou músico e estou aprendendo algumas coisas dessa área, tenho alguns projetos feitos.Obrigado.
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?
Cara incrível da pra fazer ate sem o java script se nao quiser que mexe INCRÍVEL
o melhor metodo, sem duvidas, só não estou conseguindo deixar responsivo
Obrigado cara, você me ajudou muito no meu projeto da faculdade
me ajudou muito em um projeto meu que precisava de um slide, você é brabo!
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.
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
Explicação muito boa, muito objetivo, deu-me uma grande ajuda no meu trabalho.
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
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 !
virou front?
@@KelvenWyllames ainda não irmão, ta tenso conseguir vaga e também continuar focado, mas jajá consigo hehe
@@ak4mee432 fé em Deus que você vai conseguir, irmão!
eai conseguiu man??
Conseguiu ?
gostei muito do conteúdo fiz o css todo utilizando o Sass e ficou sensacional.
que incrivel, amei o video, a explicação que foi excelente, vc ganhou mais um inscrito.
Melhor tutorial do youtube, batendo de frente até com escolas grandes aí. Ficou de fuder mesmo, valeu pela força meu brother
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!!!
muito obrigado!!! me ajudou muito no meu estudo de js!!!
Muito top o conteúdo!
Sem enrolação, direto ao que interessa!!
Gostei mano estou aprendendo html css js vou seguir pra aprender mais
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!
Você não tem noção o tanto que me ajudou, obrigado cara
que vídeo incrível!!! meus parabens, irmao! me ajudou demais a fazer alguns projetos mais elaborados no front. abraços
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.
Amei o trabalho, gostaria sim de ver mais video assim, com esse video você me ajudou muito era tudo que eu precisava.
Muito obrigado por compartilhar essa aula! Me ajudou bastante aqui em um projeto! 👍
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!
vc conseguiu? to penando aqui
@@esperandooadvento8925 não resolvi deixei como estava mesmo
Muito bem explicado!!! Gostei muito, ta de parabéns!!!! Projeto simples mas funcional!!!
Baita explicação! Faz mais vídeos assim, pequenos e bem interessantes de recursos que podemos aplicar num site, por exemplo. Grande abraço!
Excelente vídeo, parabéns pelo conteúdo e obrigado por compartilhar! Sucesso ao canal!
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.
Valeu, Professor. Didática excelente. Aprendo muito contigo.
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?
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.
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!
salvou meu projeto maninho, muito obrigado!
Rapaz, muito obrigado.... excelente explicação, esta de parabéns
Show demais, grato pela aula!!!
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.
Mano, muito bom o vídeo. Me ajudou muito no meu TCC
Me ajudou muito. Obrigado
Muito bom. Deu certino aqui.
Obrigado, ajudou demais, ja me inscrevi e dei like.
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.
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
Up
Up
Up
otimo video muito obrigado por toda sua dedicação
Sensacional!! Ajudou demais a fazer os slides do Banner do projeto de um e-commerce
Objetivo, Simples e funcional. mt bom mesmo!!
Video muito didadico para entender o conteúdo, está de parabéns boy +1sub
Muchas gracias!! Me sirvió de mucho, saludos desde Uruguay!
Você é 10. Muito obrigado
Vídeo muito bom, continue assim!
Muito top o vídeo, parabéns 👏🏻👏🏻👏🏻👏🏻
Vc explica muito bem, valeu. Esse modelo de slider funciona bem se for colocado de maneira responsiva?
Show de bola, ajudou demais
Caramba, muito show! Trabalho incrível, parabéns!
Tamo juntoo 🤟👊
Que vídeo sensacional !! Que aula, obrigado.
Muito obrigado pelo conhecimento! 😁😁
Parabéns, incrível ♥️
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?
Maravilha, seria possível um tutorial de checkout transparente de pagamento do mercado pago, com essa mesma explicação passo a passo? Abraço.
show de bola muito grato!!
muito obrigado pelo vídeo, me ajudou muito!!
Parabéns, o melhor que eu ja vi
muito bom o vídeo, grato por compartilhar.
Me ajudou muito !!! Obrigado mesmo
Bom demais! Claro e objetivo!!!
Obrigado pela ajuda!
Mano, muito bom!
Me ajudou muito a entender!
Excelente video! Obrigado mano!
Mt bom o video, mas se colocasse transition na div das img nao trocaria de margin mais suavemente? Invez de duro assim
Tu é muito bom! Obrigado!
Show de bola eu fiz com 6 imagens ,agora vou tentar deixar responsivo para fazer uns testes kkkkkk
muito bom mano. Ajudou de mais. +1 inscrito
Que didática sensacional!
excelente vídeo!! parabéns
Tooop parabéns me ensinou algo q eu apanhava muito kkk
Fantástico esse tutorial!!!
Obrigado por me ajudar!
Ola, tem jeito fazer isso sem o ?
vc salvou vidas, parabens
Caracas. Esse deve ser o nível de um "Sênior" kkkkk. Muito bom, cara. Vc é demais.
boa tarde td bem, vou começar agora este projeto de slide, estava procurando um para incluir no meu projeto, sou novo em html e css, estu tentando entrar nesta area. posso contar com seu apoio?.
Ficou top! Teria como fazer o carrossel 100%?, na tela toda?
Boa tarde, tudo bem?
Um perguntar
1.queria sabe se A imagem do slider e do mesmo tamanho?