Carousel de Películas Estilo NETFLIX con HTML5, CSS3 y Javascript
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- Continuamos con nuestra practica diseñando una pagina estilo Netflix, ahora crearemos un carrusel de imágenes desde cero.
Mis cursos de desarrollo web:
⭐ Curso Completo de Diseño Web Profesional:
www.desarrollo...
⭐ Curso Completo de React y Firebase:
www.desarrollo...
⭐Curso Completo de Javascript
www.desarrollo...
⭐ Curso Completo de PHP y MYSQL:
www.desarrollo...
⭐ Curso de Bootstrap 5:
www.desarrollo...
⭐ Curso Completo de creación de tiendas online:
www.desarrollo...
---
📄 Código del Proyecto:
github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters
![ถามตรงๆ กับ อาจตุพร ทำไม ประเทศไทย ใครเป็นนายก ก็โดนด่า พอออกเเล้วคนคิดถึง!!?? l [Nickynachat]](http://i.ytimg.com/vi/3YFLMXxBGAs/mqdefault.jpg)
![ว้าว!ลุงบีมแบกทองมารับขวัญหลานกันยกบ้าน [cc] แดนแพทตี้ SS2 | EP.49 |](http://i.ytimg.com/vi/Osihq1OAs-4/mqdefault.jpg)
No suelo ver videos de programación en español porque hay de mejor calidad y variedad en Ingles, pero te felicito, eres uno de los mejores en cualquier idioma. excelente canal y explicación, excelente profesor de JavaScript! :)
Muchas gracias Natalie!
Ya soy diseñador y empecé a realizar prototipos en adobe Xd. Pero quedé con las ganas de programarlo yo mismo y me conseguí con tus videos. Me terminé el vídeo sin algunos conocimientos básicos que no recuerdo de la universidad. Pero entendí y asimilé muchas cosas... Agradecido 🎉
Es increíblemente satisfactorio escribirlo por tu cuenta y no solo copiar y pegar, gracias por explicar!
Finalicé el video y el proyecto!!! Tenía pendiente seguir este proyecto con esta segunda parte, ya que estuve finalizando el semestre, pero me interesaba mucho. Muchas gracias por compartir tus conocimientos y explicar de una manera muy entendible.
Se que pasaron 2 años que publicaste el video pero llevo horas y porfinnn pude :) grax buen video.
Fijate que hace 2 años asi lo vea super complicado y ahora coser y cantar. Gracias por tu aportacion me ha servido para implementarlo en mi proyecto. Thank so much!!
Finalice el video y el proyecto!!!!!, a pesar de que tengo 15 años este tipo de cosas me gustan y no solamente porque es divertido hacerlo si no también porque es un reto para mi, para poder seguir creciendo y desarrollarme aun más, estoy muy contento con los frutos del resultado de ver visto tus videos. Hubo momentos donde no me salían las cosas pero aun así seguía intentando y trataba de no rendirme, te doy la gracias por el trabajo que realizaste al hacer este proyecto y decirte de antemano que me gusta mucho la manera en la que explicas.
Deberías de ser mi profesor en la Universidad xd
Excelente, fui junto con vos, y la verdad pude lograrlo. y la explicacion genial.
Finalicé la trilogía! Desde que la travesía comenzó en Xd, hasta sus puertas en HTML y su antesala en CSS, para finalizar en el trono con JS.
Genial Gabriel, espero que te haya gustado el final !
Yo recién inicio el camino...comencé por Javascript pero me percate de que el inicio correcto es por HTML. Exitos!
yo igual, me tomo tiempo seguirle el ritmo pero de verdad aprendí cosas interesantes con la trilogia del tio falcon
Acabo de terminar la 2da parte de la página principal de Netflix con todo y carousel, excelente explicación !!!! Muchas gracias..
Acabo de utilizar tu carrusel en un proyecto de mi trabajo, muchas gracias! ♥
genial es excelente, estoy de a pico con java y lo has explicado de una manera muy clara. Es muy satisfactorio hacer un proyecto como este que ha quedado excelente. Felicitaciones y muchas gracias
Un trabajo increíble, soy de los que se han acabado los tres videos, he hecho la página y ahora sólo me queda conectarla a una base de datos para que la gente se pueda registrar (es un trabajo de mi centro educativo) gracias, me fue muy útil!!
Finalizado y agradecido, SOS TODO UN CRACK
Yo termine de ver la serie de tutoriales, aprendí bastante con este tipo de tutoriales desde cero, para entender un poco mejor los frameworks o librerias de javascript.
Solo te faltó ocultar la flecha del carrusel cuando se esta al principio o al final de las peliculas.
Hasta aquí he llegado! Gracias por el tutorial mi amigo Carlos 👍 tengo que confesar que me encanta la forma en que programas. Muchas gracias por todos los vídeos y este último. Dios te bendiga Carlos.
Increíble tutorial, me ha ayudado mucho.
Después de tanto tiempo viendo tutoriales me parece sorprendente que sigan haciéndolos de forma desinteresada, solo por fomentar vuestros conocimientos.
De nuevo muchas gracias.
Excelente como siempre! Felicitaciones. Podrás hacer un video más haciendo que al hacer clic en el carrusel cargue la imagen y descripcion principal?
Si podes estaría genial.
Muy bueno, lo vi hasta el final en dos días
Me gustaría hacer una página web de películas en línea. Que me recomiendas?
Llegué hasta el final del video. Justo lo que estaba buscando. Lo voy a aplicar en mi proyecto. Muchas gracias por compartir tus conocimientos.
Todos tus videos estan geniales, hace como 2 semanas que me instruyo con la forma tan clara y sencilla con que explicas cada cosa. Felicidades tocayo.
Excelente vídeo ! FELICIDADES !!!!! muy bien explicado, lo que más me gustó fue que vas explicando el código conforme lo escribes y una vez terminada cada sección regresas a hacer un repaso de todo en conjunto y rematas mostrando el resultado. GENIAL ! TE FELICITO, POCOS TUTORIALES CON TU ESTILO !
Muchas gracias, intento mi mejor para que todo se entienda y no solamente sea copiar código y ya.
Con algunos errores pero lo termine ya solo le hare las correciones, muchas gracias por subir estos videos, estaba buscando algo con que practicar mi css y relajarme un rato y me la pase muy bien con tus videos y aprendi cosas nuevas, Gracias!!
Hasta el final. Es fascinante aprender con tus cursos. ¡Eres un magnífico pedagogo!
Muchas gracias, espero que hayas aprendido mucho :D
Excelente y que complejo jaja! Me encantó! A por más!
Gracias, me funciono noche, madrugada y día, valió la pena me suscribo a tu canal.
Gracias por animarte a mostrarnos tu trabajo, de veras!!! Se nota tu arduo esfuerzo, explicas super bien y esta todo super completo, muchas graciassssssS💖
Gracias a ti por ver mi video, me alegra mucho que te sirviera! :D
¡Hola Falcon! Me ayudo muchísimo este video, me aclaro montón de dudas. ¡Muchas gracias!
Genial, buscaba algo así para hacer un slider y colocar las imágenes de marcas con las que he trabajado y evitar así el uso de más plugins en WordPress. Lo único que no está en jQuery, pero supongo que podré apañármelas y pasarlo a jQuery y así adaptarlo junto a los otros sliders que tenía hecho pero con otras funcionalidades. Lo único que he echado en falta es hacer el slider infinito y que tuviera la función de autoplay. Gran trabajo!
muchas gracias, me sirvió muchísimo ya que de momento no quiero usar una librería ni usar otro plugin, ya que estoy retomando un proyecto de wordpress que anda bajo en rendimiento y no quería meterle más peso, ahora solo necesito meterle un poco más para hacerlo automático, creo no meteré indicadores pero si debo volver al principio cuando llegue al final jejejeje
he visto el video completo y el anterior tambien . He creado el video completo en mi visual studio code. Estoy aprendiendo a diseñar y programar paginas web. He visto otros videos tuyos, como el de flexBox o el de los articulos destacados. En fin, darte muchas gracias por todo lo que estoy aprendiendo de ti y contigo. Lo explicas todo muy muy bien. Eres un Crac.
Terminé vídeo y proyecto, es para un trabajo de la universidad y quería darle un toque bonito poniendo algo así. Mil gracias.
Lo termine hasta el final del trabajo, espero mis felicitaciones
Hola! llegué hasta el final del video. muy bueno la verdad!!! lo único que noté es que si yo hago responsive la web no se cumple el tema de que el display pasa a none con el navegador chrome. Pero en firefox sí está funcionando, raro. Fuera de esto, todo fue muy bueno y bien explicado. Muchas gracias FalconMasters!!!!
Muchas gracias Eduardo, revisa bien tu código, sobre todo que tengas el metaviewport bien.
Excelente no sólo el comentario final sobre las librerias, sino todo el video ...Muchas gracias y seguiré aprendiendo en la medida que nos enseñes...
Eres un crack bro... lllegue hasta el final y acabe la practica muchas felicidades
Hey muchas gracias y felicidades espero que hayas aprendido mucho!
Grandiosa explicación profe Carlos eres un crack hermano, muy agradecido por habernos compartido tus conocimientos, imposible no terminar los tutoriales una forma muy didacta de explicar muchos éxitos bro.. Aprendí mucho en este tuto sobre las funciones de javascript.
Llegué hasta el final del carousel, me encantaron los tutoriales estilo Netflix :)
Desde hace años te sigo y me encanta lo que publicas, sigue así!
Muchas felicidades por ver toda la serie, espero que hayas aprendido mucho!
Y gracias por el apoyo a mis videos.
Tengo 3 cursos tuyos y fueron los mejores, ojala te des un tiempo para que hagas el curso de Javascript + proyectos!! gracias capo
i dont mean to be so off topic but does any of you know a trick to log back into an instagram account..?
I somehow lost the account password. I love any tips you can offer me
@Trenton Lian instablaster =)
Muchas gracias amigo. Tu forma de exponer el trabajo es excelente.
Eres asombroso falconmaster, te admiro mucho ❤️
Gracias!
muy bueno los video gracias espero que haga la continuación y poder llegar a tener una pagina activa, soy estudiante y quiero aprende mucho mas ...
Si lo acabe 😎, Gracias bro!! Me iso mucho paro para un proyecto de escuela! 😊
Excelente... aprendí bastante en poco tiempo... y a casi un año de que lo publicaste... Wow.
Muy bien trabajo, lo aplique, felicidades!
Muy bueno el video vi los 2 jajaja o sea creo que fueron 1 hora y media la verdad ni se siente están muy buenos tus videos 100000/10
Te puede interesar este video también: th-cam.com/video/D1rChltQB4Q/w-d-xo.html
carlos arturo saludos definitivamente excelente para practicar.
Hasta el final. Genial el video.
Hola otra vez. He cogido tu ejemplo y lo he modificado un poco, ya antes hice que leyera la informacion de una base de datos. Ahora si dejas el raton sobre la imagen 90 segundos, pone la imagen en pantalla junto con los datos de la misma, esto sin necesidad de hacer click. Si haces click es instantaneo. Saludos y gracias.
MUCHAS GRACIAS, VI EL VIDEO COMPLETO. EXCELENTE
me encanto y llegue hasta el final me encanta como explicas lo comprendo muy bien Gracias!! me quedo Genial!🙃
Saludos master, eres el mejor! he hecho casi todos tus cursos por aca y llegue hasta aqui y seguire contigo, aprendo muchisimo, desde venezuela un abrazo bro. pronto hare el curso de bootstrap 4 en udemy.
Me exploto la cabeza. Tremento tutorial!
Excelente practique en diseñar la página sin el carrusel creo que usaré bootstrap para el slider pero si lo máximo
me ha gustado mucho, y es muy útil para nuestro día a día y hacerlo en nuestras páginas muchas gracias!!!
Excelente, me animaste a retomar loq ue en un momento de mi vida fue mi pasion la programacion, seguire viendo todas tus publicaciones.
SAludos.
Excelentes vídeos. Yo termine los tres y mi página me quedo genial. Estoy programando mi página en Dreamweaver CS6. Mil gracias.☺️
Sos un genio!! Comento para decirte que terminé de verlo (tal como pediste al final)
Muchas gracias por ver todo mi video, espero que hayas aprendido mucho en el.
muy bueno exelente explicación soy nuevo y entendi perfectamente va mi me gusta gracias por el contenido de calidad
Que bueno que me suscribí por el curso básico de HTML y css jaja, haré esto como proyecto que acabe unos cursos
Muchisimas gracias por este video. Vi hasta el final del video y queria aprovechar para dejar mi humilde comentario. Aprendi bastante, tenes razon, ya existen librerias como Bootstrap pero queria hacerlo desde cero yo. Saludos desde Argentina
Gracias a ti por ver mi video. Me alegra que hayas aprendido mucho.
Saludos!
Excelente Carlos 🔥, tiene 100
Llegué hasta el final!! Que lindo explicado, a un ritmo super pausado y tranquilo! :D Me super sirvió, gracias!!
Quizás, a efectos de ser aún más visual, hubiera mostrado desde la consola del Chrome los elementos que ibas renderizando desde js.
ufffffff genial , me tarde un poco en hacer que funcionara pero al final funciono bien, gracias crack !!!!!!!!!
efectivamente vi los tres videos son muy dinamicos se requiere compromiso pero aprendes mucho ...
Por acá finalizamos el video. Excelente profesor! Gracias!
Muy buen tutorial, pero me gustaría que también tocaras el punto de la reproducción de vídeos así como en netflix, que se pueda cambiar el idioma de la película que se esta reproduciendo y así mismo que también se puedan agregar subtitulos
Excelente tutorial, aprendí bastante y pude reforzar conceptos. Se agradece mucho tu esfuerzo y ojalá podamos seguir viendo tus videos. Abrazo!
hola brother, yo finalicé el tutorial correctamente, ya tengo mi pagina estilo netflix concluida igual que la suya. Gracias por todo su esfuerzo, ya que se lo que supone la edición de vídeos.
Agradecido por tus vídeos, nos permite aprender de tus experiencias como desarrollador. Seguiré viendo tus vídeos. Éxitos!!! Y a cuidarse en estos momentos....
Muchas Gracias Amigo !!!!🫂
Excelente !!!! Super bien Explicado, saludos
Sin dudas eres muy bueno enseñando y tus tutoriales son los mejores 100% recomendados a cualquiera
Muchas gracias!
Estubo muy bueno, Genial! Acabo de terminarlo.
Hola Carlos, llegue hasta el final, estaría genial que enseñaras como hacer un carousel responsive, excelente video 👍
Felicidades por llegar hasta el final, espero que hayas aprendido mucho.
Lo que estaba esperando 👏😁
Finalizado! Te felicito bro enseñas muy bien eres un gran maestro
Finalicé el vídeo muy bueno me ayudo bastante
Esta super el tutorial, pero algo no corría como debía, tal vez es mi navegador pero la cosa es que el contenido que había en la película principal usando la clase ".pelicula-principal" no se coloca abajo. Puse el valor "align-items: end;" pero nada,
entonces decidí descargar el código ya hecho de github y probarlo, pero igualmente el contenido se queda arriba. Entonces cambie el valor a "align-items: flex-end;" y recién salia como mostrabas en el vídeo.
Excelente video. seguiré tus cursos
Excelente trabajo... Vi los 3 vídeos ¡Gracias Carlos Arturo!
Fantástico como siempre. Me salvaste la vida.
Que grande FM, te sigo desde que grababas con notepad++
Muchas gracias!
¡Terminé con los dos videos! Excelente trabajo :)
Genial! muchas felicidades, espero que hayas aprendido mucho en esta pequeña serie.
Está buenísimo el tutorial pero te faltó poner los vídeo cuando le da play o cuando elijo una imagen para ver su información.
A los que no le funciona el (scroll-behavior: smooth) a pesar de tener un navegador compatible con esta función y haber escrito el código sin ningún error aquí va una posible solución:
Abran una pestaña nueva en su navegador, luego en la barra de búsqueda (en la de arriba) escribirán lo siguiente: (*Aquí el nombre de su navegador*)://flags, aquí un ejemplo, utilizo *opera* por lo que pondría *opera://flags* , luego en la ventana que les salió habrá una barra de búsqueda, ahí pondrán lo siguiente *Smooth Scrolling* , esa opción les aparecerá en *defaul* , por lo tienen que cambiarlo a *Enable* cierran su navegador, lo abren y listo.
Tenia ese problema, estuve buscando solución hasta que le pegue a una xd
Genial Falcon Master, llegue hasta el final y wow realmente aprendí bastante y son muchas cosas que hay que programar, ya veo porque la mayoría usan las librerías. Muchas gracias por el vídeo y el aporte. Saludos !
Haciendo esta práctica en 2023 !!!! Completado :)
Logrado Carlos!!! Muchas gracias por tus aportes!!
Maravilloso tutorial!
buena explicación me sirvio muy para refrescar conocimientos acerca de las paginaciones! Excelente!
termine bro! muchas gracias por el video. implemente varias cosas que usaste de JS en mi proyecto que sirvieron muchisimo.. muchas gracias
Muy buen tutorial, el de utilizar código crudo y duro ayuda realmente mucho a quienes desean aprender a programar, espero sigas realizando este tipo de videos de nivel con vanilla javascript
Muchas gracias, la verdad es que si ayudan mucho.
Lo voy a tener en cuenta para hacer mas videos así.
Saludos!
excelente proyecto y me encanta tu forma de explicar, te felicito y gracias!!
Lo terminé.Me resultó muyninteresante.
Felicidades! Espero que hayas aprendido mucho con este video.
te quedo chingon, si vi todo el video
I didnt undestrand anything you said but your video helped me, thanx
Hola, muy buen tutorial, me sirvio de mucho, mil y un terabytes de gracias por tu tiempo y dedicacion.
Te puede interesar este video también: th-cam.com/video/D1rChltQB4Q/w-d-xo.html
EXCELENTE... muchas gracias ya me inscribi
Muy buen video, gracias, llegué hasta el final. Hay un detalle con el carousel al momento de presionar la flecha muy rápido. como el evento solo hace que se multiplique por la página y no por el espacio, si lo presiono rapido, las imagenes se quedan a medias. Espero solucionarlo pronto
Terminé toda la práctica, voy iniciando en la programación web, pero tus tutoriales son muy muy bien explicados y claros, sólo quisiera saber como le agrego el contenido a las imágenes, ya que lo quiero aplicar en una tienda virtual de productos. De nuevo, muchas gracias por tus enseñanzas.
Complete el Tutorial, excelente explicación y cuanto conocimiento, mis respetos hermano te mando un abrazo :D