ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- Crea un Carrusel de Imágenes automático Responsive con HTML CSS JAVASCRIPT
En este tutorial te muestro a como puedes realizar un carrusel de imágenes MANUAL Y AUTOMATICO , además totalmente responsive utilizando solo HTML CSS y JAVASCRIPT, empezaremos con la parte teórica para pasar a la parte practica y lograr entender como funciona un SLIDER.
❤ SUSCRIBETE: / @danicodex
-------------------------------------------------------------------------------------------------
INDICE:
00:00 --- INICIO
01:24 --- ¿COMO FUNCIONA EL CARRUSEL DE IMAGENES?
05:00 --- HTML
08:48 --- CSS
25:15 --- JS (SLIDER MANUAL)
50:37 --- JS (SLIDER AUTOMATICO)
52:40 --- SLIDER CON X IMAGENES
55:01 --- FINAL
-------------------------------------------------------------------------------------------------
Descarga el código:
github.com/DaniCodex/carrusel...
-------------------------------------------------------------------------------------------------
Redes Sociales:
📌 Instagram: / mike.dan.pc
📌 Facebook: / mike.dan.pc
📌 X: / mike_dan_pc
📌Tik Tok: / michael.daniel.dev
#danicodex #slidercard #javascript - วิทยาศาสตร์และเทคโนโลยี
La explicación teorica que nadie explica hermano mas claro que el agua imposible rey, nuevo sub gracias por existir bro
No suelo comentar en videos, pero realmente quiero agradecerte. Este video es excelente, sin saber absolutamente nada de JavaScript pude entender cada paso y su logica para despues aplicarlo en otros proyectos. De la misma forma que reforce conceptos de CSS que hacia de forma automática sin entender el "para que". Simplemente, muchas gracias!
Gracias por tu hermoso comentario amigo 🙂
Excelente tutorial, justo necesitaba uno para una cantidad dinamica de imagenes. Muchas gracias.
Excelente explicación, detallada y mostrando todo desde cero muchas gracias hermano.
¡Muchas gracias por el tuto es EXCELENTE!
Gracias y felicidades, mucho exito
muchas gracias, gracias por transmitir de forma clara tus conocimiento, hermoso trabajo.
muy bien explicado! gracias tenga su pulgar arriba.
Excelente, vale la pena cada minuto de este video! Gracias
Eres definitivamente un crack!!
excelente hermano, aprendi mucho contigo! gracias!
excelente explicacion continua realizando asi los videos , explicandolo todo desde el principio. Creo que es el unico canal de youtube donde vale la pena estar, por que realmente te enseña desde cero. Encantado con la explicacion de como funciona el carrusel de imagenes. 💪🏻🔥🔥🔥
Excelente explicación!!! Por fin alguién que muestra no solo el código escrito, sino también la lógica utilizada. Felicitaciones! Nuevo suscripto y Me gusta!
Eres excelente explicando. Mis felicitaciones, muy claros los conceptos (Subscriptor ++)
Muchas gracias hermano que buen tutorial 💟
Hola te quedo bien, voy a tratar de crearlo y aplicarlo a mi proyecto muchas gracias x compartir tu conocimiento.
que buen tutorial loco, muchas gracias, aprendí un kilo y aparte pude ayudar a mi equipo de proyecto :p
Vídeo 10/10
Teoría 10/10
Excelente explicación a detalle, muchos solo esperan Ctrl + C y Ctrl + V para poner en sus códigos, pero me alegra que explicará tan bien la teoría.
Excelente video! Como recomendación para mejorar la practica. (No digo que este mal, esta bien) pero se puede mejorar usando la maquetación de Como contenedor padre, seguido de el como contenedor hijo y posterior se usaria para las imagenes. Muy buen contenido! Gracias por el video.
excelente video, de verdad que la explicacion es muy buena
gracias por el video me a gustado mucho
Tremenda explicación man! muchas gracias por compartir!
Contenido de calidad! Nuevo suscriptor y me voy a ver varios videos! xDD
Gracias de nuevo bro
Saludos desde Mexico!!! Excelente explicacion!! solo quedo algo pendiente!! el hacerlo responsive!! bueno no se si decirle asi!! en cel hasta tablet se ve excelente!! pero siento que en lap o de escritorio ya esta muy chico!! De todos modos felicitaciones!! No habia encontrado alguien que explicara tan bien!!
wow increible como explicas amigo, muy buen video kpo
Gracias amigaso , te puedes pasar por mi Instagram para ver tu comentario
muy buen video , gracias
Muchisimas gracias !
Excelente!
Like más que merecidos. Muchas gracias por tu valioso contenido 😊;
Muchas gracias!! Espero te haya servido 🙂
muy buen videooo graciasss
¡Hola!
Amigo increíble lo que asé 👍👍
Gracias! 🙂
Genial mi estimado
Eres el mejor
excelente contenido brother
Gracias por pasarte por acá!! 🙂
nuevo subscriptor aquí
Gracias por pasarte por aquí!! 🔥
Ícono
Buen video bro, una consulta. Con un carrusel funciona. Pero al hacerlo con varios, el contador de segundos para pasar a la siguiente imagen, al hacerlo, todos los carruseles se distorsionan. Cuando pasa de una imagen a la siguiente (todos los carruseles a la vez) se entorpece el efecto de transición y muestra mitad de una imagen y mitad de otra. No se si me explico. El problema ocurre cuando hay mas de un carrusel. Cree funciones con otro nombre, pero ocurre igual...
muy bien explicado todo, muy buen video.
Oye tengo una duda hice todos tus pasos pero la imagen no me ocupa todo el espacio del cuadro, como puedo resolver eso?
Exelente, se podrá mover las imágenes o un link con sólo moverlo con la manito del Mouse.
En el caso sea ocupar el 100% del width, se tiene que realizar un calc de 300% / 3? O sea, me sale, pero no se si sea la forma correcta.
Muy buen vídeo, una pregunta como podría hacer para que cada vez que le de a siguiente o anterior imagen el setInterval se reinicie, si le das y justo han pasado 3 segundos pasa 2 imágenes seguidas. Gracias!!!
revise todo todo y no me corre el carrusel, igual eres excelente amigo
hola buenas amigo muy buen video, pero tengo una duda y es de como podria yo agregar texto cada imagen de forma individual si me pudieras decir me ayudarias mucho
buenas. tengo un menu responsible con las tres lineas al darle click al menu me queda debajo de este carrusel y no he podido que el carrusel quede debajo del menu responsible ayuda
buen video hermanito, pero tengo una consulta al pasar el ultimo al primero que no se vea como un corte sino q se vea como las demas imagenes
Entonces ya le quites la transición
hola que tal, muy bueno el video, pero cuando corre el ultimo slide y vuelve al primero, se pierde el efecto, como se puede arreglar?
me funciona el counter en la consola, pero no me cambia las imagenes
me podrian ayudar?
Hola, muchas gracias por el video! sólo una duda, si sólo quiero que el carrusel sea automático, sin iconos, ¿puedo hacer uso del mismo código?
Asi es!! Si no hay iconos no hay interacción, también podrías eliminar el evento click por qué ya no será necesario
Hola. Sabes cómo hacer para que la imagen no regrese ala primera posición al actualizar la página???
Me explique?????
LocalStorage, like a este comment para que lo haga
Me dio error en la linea "btnLeft.addEventListener("click", e => moveToRight())"
Help
40LIKES. Rota el code mi king
Ya puedes descargar el código
se me abre la pagina pero no sale nada , no entiendo que hice mal :(
Todo bien solo no me sirven las flechas ni avanza solooo😞 ayuda
X2
no me funciona el style.transform
me pasó lo mismo, revisa las comillas, no son las comunes, son unas que se llaman "comillas inversas", te dejare aqui esa linea por si aun te sirve: slider.style.transform = `translate(-${operacion}%)`;