Slide estilo Stories com HTML, CSS e JavaScript do zero.

[@kaiofelipejs]

Meta é estudar muito pra conseguir fazer algo tão massa assim em 30 minutos igual o André. Bom demais!!!

[@brnheavymetal]

O vídeo é ótimo e o André manja muito, mas dica, tenta não se cobrar pra fazer algo assim em pouco tempo quando ele e outros canais fazem, isso é uma dica que já vi outros canais fazendo pq normalmente fazem o projeto bem pensado em mais tempo antes de gravar

[@Rafael-ht9xo]

@@brnheavymetal Realmente. O André é foda tanto na programação quanto design. Mas ele não fez isso em 30min de primeira mesmo. A maioria dos tutoriais levam tempo para serem feitos, primeiro os projetos são feitos, depois o desenvolvedor só deixa o código dele pronto em uma tela e só vai replicando na outra, por isso quase não existe erros na hora que eles estão codando para gravação. Pq mesmo um projetinho desse talvez demorasse mais de 1 hora pra fazer, tanto na organização e refatoração do código e os bugs que vão aparecendo na meio do caminho

[@Elisha_Barros]

Comprei o curso da Origamid e foi o melhor curso que eu ja comprei , gratidão

[@williamdavid6256]

Show! Muito massa que o canal ensina fazer as coisas sem o uso de bibliotecas, isso ajuda muito o dev à se desenvolver como profissional.

[@pirilampoVermelho]

Você ensina maravilhosamente, mas não vou falar que foi fácil, porque apesar do vídeo ter 31min, eu to a 2 dias pelejando porque to adaptando isso para uma outra situação, felizmente deu certo. Eu ainda não tenho capacidade de entender extamente o que fiz, então minha manutenção nesse código vai ficar limitada. mas estou realmente feliz de ter conseguido reproduzir no meu contexto e espero que em mais alguns meses eu consiga chegar pelo menos perto de você. MUITO OBRIGADO!

[@battlefield4707]

Meu Deus, que vídeo bom na terra, amém. Muito obrigado pelo conteúdo, Mano

[@bl1tz_x]

Carai, tava procurando justamente isso e ainda encontrei logo do André 🤤🤩

[@marcosdelvalle3655]

Depois dessa percebi que preciso estudar mais e colocar mais em prática tudo o que eu aprendo nos seus cursos!!

[@matheusalves1848]

Cara, que vídeo! Virei seu fã! Muito obrigado!

[@lucroalucro]

Tu é o cara muito obrigado ajudou bastante eu precisava implantar isso em um sistema meu com banco de dados deu certinho. Parabéns.

[@jeffersonm.5]

Muito bom amigo, merece um premio por deixar os arquivos para estudarmos. Obrigado

[@RemoteJuniorJobs]

Este conteúdo é puro ouro! 🏅 Super interessante o uso de Class para a criação da animação em JS e ainda o uso de Flex e Grid no CSS. Irei assistir a playlist de JS a seguir 🏃‍♀️

[@CaiqueMoraes93]

Genial! Eu te amo André!

[@theamazingvitorshow]

Conteúdo absurdo, MUUUTO profissional. Parabéns msm!!!!!

Tuas coisas são sempre muito bem feitas, muito lindinhas

[@dolfera1962]

Esse vídeo foi um dos mais sensacionais que já vi. Realmente é um conteúdo diferenciado, tudo feito na unha e com uma didática incrível. Parabéns!!!

[@luizalmeida4884]

Muito legal! Esse canal é ótimo a didática é de fácil entendimento e o conteúdo sempre é interessante. Obrigado por compartilhar conhecimento com a gente!

[@asamadoasa6517]

Esse cara é muito bom!!! obrigado por compartilhar seus conhecimentos! abs

[@hugoalmeida883]

Adorei esta aula, fiquei fascinado com o que conseguimos criar! E pareceu muito fácil 😂

[@lobandev3388]

Sou aluno do curso, e recomendo 100%, o André é muito fera, legal seria se tivesse um grupo com os alunos, pra gente compartilhar conhecimento.. haha!

[@DanielTolentino42]

Grupo do discord ia ser massa

[@juniiormendes937]

Só criar galera

[@Elldevv]

E ai, depois de um ano desse comentário, como estão os seus conhecimentos? Ainda estuda?

Uma Girafa embaixo da outra! Valeu, André. Melhores vídeos de programação do youtube

[@estevaolibardi]

Obrigado André!

[@victorgd]

André, você poderia fazer um vídeo falando sobre suas configurações do Visual Studio Code? Como fonte, ícones e tema.

[@robertofeitosa1141]

que cara foda, ótima aula

[@ronaldobezerra6703]

Esse cara é fera. Show!

[@felipebatista7469]

esse cara é sinistro demais!! OBG professor!

[@saulotarsobc]

Cara... Isso que tava procurando. Muito obrigado. Nota 10

[@AsaDeltaComunicacoes]

Muito legal. Parabéns pelo trabalho desenvolvido e obrigado por compartilhar conosco.

Essa aula me salvou, eu estava precisando de um tipo de slide desses para apresentar meus trabalhos...

[@iranymoledo]

como faz para quando segurar com o dedo parar de correr o tempo ?

[@dariocosta8419]

o cara é um gênio

[@antonioedinadson]

Esse cara é muito fera.

[@bernardostogmuller2256]

Ainda nem vi, mas sei que é um conteúdo excelente, sou fã do canal! Obrigado pelo conteúdo gratuito. Um dia espero poder pagar os cursos para ter acesso a todos os cursos.

[@luispaulocavalcante1459]

Tá rolando a promoção mano

[@bernardostogmuller2256]

@@luispaulocavalcante1459 tô ligado, to tentando ver se consigo pegar antes de acabar a promo.

[@AlexsanderGabriel369]

Estudar muito pra um dia ser tão profissional assim, incrível.

[@robsonrdsaraiva]

Aula sensacional! Parabéns pelo conteúdo incrível.

[@dionismarquesvalada8839]

Muito bonito e bem explicado. Parece um slide de aplicativo.

[@alexalannunes]

muito showwwww Parabens viu!

[@Maves_]

Como colocar no lugar da imagem , um vídeo ?

[@patrickgroot4497]

Thanks for this tutorial! Would be nice to include a pause/freeze carousel option on hover and continue on mouseleave.

[@netomoraes3931]

Incrível!

[@thiagorussi4401]

muito show ! queria saber como faz tbm a animação de arrastar pro lado os stories, quando você puxa e solta o mouse ele vem andando

[@rayanmarcus]

Acho que isso é usando alguma coisa relacionado a "touch" no CSS ou no JS

[@rayanmarcus]

Demais, André! Esculacha no CSS e no JS!

[@duelgd]

bot excluiu meu comentario ;-;, mas 12:20, o meu da erro sempre q coloco o this.init();, alguem sabe como resolver? imagem do erro: * prnt (ponto) sc / 1v 6v z 0l (só remover os espaços e trocar o ponto)* erro: slide.js:25 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at slideStories.addNavigation (slide.js:25) at slideStories.init (slide.js:30) at new slideStories (slide.js:7) at slide.js:40

[@carloseduardo8547]

Muito bom! Parabéns.

[@luisasoriano8174]

E se eu tiver uma div somente com um elemento dentro dela? 15:52

[@daSilvaPlay]

Conhecimentos incríveis

[@matheussalesq]

👏🏼👏🏼👏🏼

[@ElpidioNLimaJunior]

Parabéns pelo video!! Teria como definir um time da animação de forma dinâmica? Exemplo. Se eu colocar um video e pegar o .duration dele e definir a duração da animação e do timeout. É possível mandar um exemplo assim ? Mais uma vez, parabéns!!

[@pelosmeusolhos938]

Muito bom! Parabens

[@djvavs5760]

como eu faço para colocar videos no lugar das imagens ?

[@marcoscruz1845]

Cara Muito bom Muito bom mesmo!

[@luanscar6371]

Que legalllll

[@alexsirbu5911]

Oi, como faço para adicionar vídeos em vez de imagens? Obrigado pelo vídeo, foi muito útil

[@Sharmeiro]

Show de bola

[@Lenioth]

to tentado fazer que quando o mouse ou se for no mobile fique em cima da imagem ele pause a transição, mas nao encontrei nada na internet

[@omidghadiri5431]

Thanx , i Like very much

[@tonysjc]

Genial, parabéns

[@RenatoSilva-vb8kq]

Brabo dms!!!

[@williamfrazao5690]

maravilhoso!!!!

[@JoaoNeto-rh6lx]

André. Parabéns pelo trabalho, ficou show o slide! Tenho uma dúvida. Estou criando várias matérias para o meu blog usando o WordPress. Praticamente quase todas as matérias vão ter galerias de fotos. Cada post vou ter que alterar o HTML e adicionar um novo class? Ex.: HTML: data-slide="slide" - HTML: data-slide="slide01" - JS: new SlideStories('slide'); - new SlideStories('slide01'); ... como faço para deixar o slide universal, adicionar várias galerias sem ter que ficar mudando o nome?

[@WesleyGameplayOficial]

Sera que alguem pode me ajuda, tentei fazer o projeto e aparece os seguintes erro para mim: Slide-stories.js:9 Uncaught ReferenceError: active_Slide is not defined at Slide-stories.js:9 (anonymous) @ Slide-stories.js:9 slide-stories.js:1 Uncaught SyntaxError: Identifier 'slideStories' has already been declared

[@lglf77]

Irmão. Tava pensando em você hoje. Fui e pesquisei seu nome de canal no you tube. Será que você poderia me atender em algo sobre RN e React.Js? To na dúvida aou até bonzinho no front end dos dois. Mais tenho falhas em concentrar código em consumo de crud e bancos. n9 Javascript desses frameworks acima. Como ta o preço dos teus cursos?

[@marisousa2272]

Como eu faço para ter vários slides desse? Tipo, quando clica em um perfil aparece as fotos daquele perfil, se clicar em outros, as fotos do outros perfil? Tipo no Instagram mesmo. Alguém poderia me ajudar, pfvr?

[@pixsupershoes200]

o meu não esta funcionando esta aparecendo null no console do navegador

[@ricardocruz6350]

Professor, sou aluno do Origamid. Existe um manual com esse tópicos no Html, CSS e Java Script, tipo (Atrubuto, body, head e outros) para se memorizado?

[@diemecomperdefante5473]

perfeito

[@robsonsilva561]

Qual editor de código e tema você está utilizando?

[@Origamid]

VS Code, com meu tema. Se chama Origamid Next

[@vagnerferreira5012]

Caralho ficou top!

[@painjoker4889]

essa aula tem no curso ?

[@JonnathanNascimento]

E num já tá aqui?

[@painjoker4889]

@@JonnathanNascimento ?????

[@wmarketing9660]

Vale a pena fazer o curso html CSS e JS dele ?

[@christopherfelix7322]

Muito!

[@l.lawliet4268]

Demais

[@charlesmontilla]

Puta que pariu, coisa linda de ver!

[@ksecbr3496]

Isso é ensinado no curso?

[@monarca2846]

Alguem conhece um projeto parecido, onde eu consiga adaptar para classificar imagens? A ideia seria marcar as que interessam e depois poder listar a seleção.

[@dariocosta8419]

na raça, sem plugins

[@pixsupershoes200]

deu certo olhe de novo

[@AlanSilva-cm8wc]

Quero ser seu melhor amigo kkkkkkkkk

[@domingosmanhique3547]

tenho um erro na linha onde vem: this.items = this.slide.querySelectorAll('.slide-items > *'); diz *Uncaught Type Error cannot read properities of null (readend 'querySelectorAll')* e deve ser por isso que nao consigo ver nada quando ponho opacity o para todos... nem se quer mostra o ativo.. peço uma soluçao!!

[@pfd1925]

Estava com o mesmo erro, conferindo aqui percebi que estava usando as aspas erradas na primeira linha do constructor, ela deve ficar assim: this.slide = document.querySelector(`[data-slide="${id}"]`); com esses acentos graves no lugar das aspas, tenta ai

[@mayerwag]

André para presidente

[@pfd1925]

👏👏👏