🔥Cómo hacer un CARRUSEL en HTML, CSS RESPONSIVE con JAVASCRIPT 😱 *FÁCIL* Eduardo Fierro Pro

[@EduardoFierroPro]

🔥Vídeos QUE NO DEBES PERDERTE kzbin.info/www/bejne/pH22dayEnceIpLs 🔝 TRABAJAR cómo DESARROLLADOR kzbin.info/www/bejne/pH22dayEnceIpLs 🤯Explicando conceptos COMO NUNCA antes HABÍAS VISTO kzbin.info/www/bejne/rHuTd6uPl7upac0 🛠RECURSOS para PROGRAMADORES kzbin.info/www/bejne/aqKnZYaQZrSNopI 😎TRUCOS para PROGRAMAR MÁS RÁPIDO kzbin.info/aero/PLJpymL0goBgGg01K8cK5zi17WhSzhyG2L *CÓDIGO EN GITHUB* github.com/eduardofierropro/Carrousel-en-HTML--CSS-y-Javascript ¡Dale a amor al vídeo, un like y suscríbete! 😊

[@compraenchina2010]

Ya me adelanto yo a los ..... No es un array :P, al verlo en directo no vemos el contador de tiempo. He hecho triplete, like + sus + comentario :)

[@EduardoFierroPro]

Madre mía!!! El triplete!!! Muchas gracias crack 😊😊

[@compraenchina2010]

@@EduardoFierroPro al final fue cuadruplete (campanita)

[@EduardoFierroPro]

Eso es muuuuuuy de frontends!!! 💪🏼💪🏼

[@nivalv9881]

Una pregunta, como se hace para que en el celular se mueva solo con deslizar el dedo ? .

[@mikecode6221]

Estuve un buen rato buscando un vídeo que explicara bien los sliders, el mejor sin duda. Muchas gracias tío!

[@EduardoFierroPro]

Muchas gracias Miguel!! 😊

[@Lawbraker]

Muchas gracias por el tutorial. Muy útiles los atajos! Desconocia muchos de ellos.

[@nelsonbr16]

para mi es el mejor video de como realizar un slider, owwww que lo capte todo, muchas gracias por compartir tus conocimientos!

[@EduardoFierroPro]

Muchas gracias Nelson!! 😊

[@smaitini]

Hola, por fin entendi como trabaja! Muy didactico. Saludos desde Argentina.

[@EduardoFierroPro]

Muchísimas gracias Sebastian por el apoyo!! 😊

[@ains100]

Excelente contenido, no se encuentran tantos videos que se enfoquen en explicar su funcionamiento y no solo copiar codigo

[@EduardoFierroPro]

Muchas gracias Nickname por el comentario!! Me alegra que te haya gustado 😊

[@eliseoac966]

Esas animaciones que utilizas para explicar ayudan mucho. Muy buena guía, likazo bro.

[@EduardoFierroPro]

Muchísimas gracias Luccini!! 😊

[@andreadaz4193]

El minuto 4:30 sirve eh. Jaja! Apenas llegué ahí puse PAUSA y seguí instrucciones! Jaja. 😄😁 Muchas gracias, qué buen video! 🤍❤

[@EduardoFierroPro]

Jajajajaja bien bien así me gusta! 😊 Punto positivo!

[@alejandrorios6999]

Gracias Eduardo, que buena explicación. Me ha quedado bastante claro como funcionan los carruseles

[@EduardoFierroPro]

Muchas gracias por el comentario Alex!! Me alegro que te haya servido 🥳🥳

[@gastonemanuelcelis]

Genio total, son un espectaculo tus videos!

[@EduardoFierroPro]

Muchas gracias crack!! 😊

[@germanbaena6579]

No he visto todo el tutorial, pero la introduccion teorica es de mucho nivel, se nota que Eduardo tiene bastante conocimiento; ya sacare el tiempo para realizar todo el tutorial; mil gracias!

[@EduardoFierroPro]

Muchas gracias Germán!! 😊

[@franciscojavierhernandezor6178]

Wow, apenas estoy empezando en desarrollo web y le entendí muy bien

[@EduardoFierroPro]

Pues a usarlo Javi!!! 💪🏼💪🏼

[@rhaulalvarez3277]

excelente explicación , de todas es la mejor que vi. saludos desde Venezuela

[@EduardoFierroPro]

Muchas gracias Rhaul!! 😊

[@cfpereira92]

La mejor explicacion en español, muchas gracias Eduard! Saludos desde ARG

[@EduardoFierroPro]

Muchísimas gracias Christian!! 😊

[@roberom9028]

Me encantan estos vídeos, se les saca mucha utilidad, gracias artista!

[@EduardoFierroPro]

Muchas gracias Rober!! 😃

[@alanisgalvan50]

Muy bueno!! Se entiende perfectamente tanto la teoría como la práctica. Comienzo a seguirte. Gracias.

[@EduardoFierroPro]

Muchas gracias Antonio!! 😊

[@racrity]

Genio total! hiper re contra útil. Mil veces gracias.

[@EduardoFierroPro]

🤘🤘🤘🤘🤘🤘

[@bindupay2609]

Excelente explicación, video. Todo genial. Gracias.

[@EduardoFierroPro]

Muchísimas gracias Bindu!! 😊

[@BraisonsCrece]

Gracias por tus videos Eduardo, explicas muy bien. Me están ayudando mucho!

[@EduardoFierroPro]

Muchas gracias Braison por el apoyo, tanto en este como en el vídeo de la galería 😊😊

[@joselomartinez2220]

Epaaaa que talentito , que capacidad hermosa de saber transmitir info..sin dejar dudas ya que das ej cotidianos , la explicación técnica sin nosotros ser siquiera. Lejos en lo que respecta a estos temas que dictas...sos el mejor...Nobel a la didáctica y o pedagogía.Saludos y gracias Joselo de Argentina...(ese pais que gano un deporte que enrealidad se juega con una pelota.le dieron un trofeo...en fin 😌)..en cerio muchisimas gracia s..

[@gonzafalco7292]

Excelente video, clara y detallada explicación! Un grande

[@EduardoFierroPro]

Muchas gracias Gonza!!! 😊

[@gabrielcuzzio4209]

Increíble la manera de explicar y lo puntual, agradecido por tu enseñanza. Ya le di Like y me suscribi!!

[@reepot2006]

jajajajajajajajajajaja, es muy divertido ver este tuto, me encantó macho!!! aprendí un montón, que groso que sos, voy a revisar tus tutos, ya te diré qué pasa. Abrazo desde Argentina

[@EduardoFierroPro]

Jajaja muchas gracias Arturo!! Me alegro que ye haya gustado!!! 😊

[@11winding]

muy bueno, estoy aprendiendo javascript pero no sabia muchos aspectos de los que has expilicados

[@staffel0232]

Muchas gracias, muy clara su explicación.

[@EduardoFierroPro]

Gracias a ti por el apoyo 😊

[@danielvicens9931]

Impresionante la explicación... Excelente...

[@EduardoFierroPro]

Muchas gracias Daniel! 😊

[@ivandev45]

El mejor video explicativo sobre sliders!

[@EduardoFierroPro]

Muchas gracias Ivan!!! 😊

[@arielvaretto]

entendí todo, muchas gracias!

[@EduardoFierroPro]

Vamos!! 🤘

[@vitorolivera11]

Gracias Sou do Brasil :) 🇧🇷😃

[@EduardoFierroPro]

A tí!! 😊

[@gilbertopazos6877]

Muy buen video, una explicación clara y sencilla.

[@EduardoFierroPro]

Muchas gracias Gilberto!! 😊

[@Gowker]

Bro el mejor video de cómo hacer sliders usando JS. Te lo agradezco mucho, está muy bien explicado y es fácil de hacer

[@EduardoFierroPro]

Muchas gracias Burden!!! 😊

[@marcoantoniovalencia8694]

@@EduardoFierroPro tenía entendido que para todo lo del box-model recomendabas usar REM y todo lo de font-size usar EM, era al revés?

[@jufran_87]

Excelente explicación, muchas gracias.

[@andrespinillacedeño]

Muchas gracias Eduardo, me fue de mucha ayuda.👌

[@roxanap2653]

Super bien explicado! Muchas gracias. Suscrita!!

[@EduardoFierroPro]

Muchísimas gracias Roxana!! 😊

[@AlejandroLaLoggia]

Muchas gracias!! Me sirvio muchisimo la explicacion!!

[@dumitrusf3318]

mira edu vengo de los cinco capitulos de sass solo quiero decirte que se que uno al estar enganchado o siendo streamer la parte mental e psicologica esta al tanto de likes y demas y quisiera decirte que no tendrias que preocuparte por este tema ya que si en verdad tienes un trabajo y tambien youtube y te da a vivir y tambien lo disfrutas más sabiendo que todo lo que haces amas que estes tranquilo que en verdad eres un crack

[@EduardoFierroPro]

Muchas gracias por tu comentario Dimitru! La verdad es que estoy tranquilo con ese tema, no me preocupo y KZbin para mí es un hobby 😊

[@eloyccDev]

Excelente video maestro! escribes como un rayo que nivel! Tendrás algún video explicando la parte del Neo? estoy con CSS nativo y jamas había escuchado de eso , saludos!

[@reipier9415]

al colocar @include en mi codigo no puedo ver el diseño que te aparece en live server, por que puede ser?

[@davitcuellar]

@@reipier9415 porque está usando un mixin que el mismo creo xD

[@ritsainygarcia6881]

Me has salvado la vida, I LOVE YOU

[@brauliojavierlazobatista2847]

Haz tú el video campeón. ¿Si ya lo sabes para que ves el video? jajajaja Nunca faltan de esos🤣🤣🤣 Eres una máquina!

[@EduardoFierroPro]

🤣🤣🤣🤣 claaassic

[@maymontalvan]

Hola. Primero felicitarte por tan detallada explicación!! Gracias y segundo quería preguntarte cómo hago para añadir que el carrusel tenga movimiento automático, es decir, a parte que se mueve cuando doy click en el punto, que este carrusel gire o se mueva solo? Gracias por tu respuesta.

[@EduardoFierroPro]

Pues quédate en mi canal porque en breves se viene 😏

[@angelodiaz4412]

Hola Eduardo muchas gracias por el contenido que haces, estoy estudiando desarrollo front-ent de forma autodidacta para comenzar a dedicarme a la programación de aquí para adelante en mi vida laboral. Estoy terminado la pagina web para mi primer cliente y use tu método para hacer el carrusel de imágenes (el cual me encanto por cierto) y quería saber como podía hacer que este carrusel fuese automático además de poder cambiar las imágenes de forma manual usando la misma estructura de código que usaste en este video, estaba pensando usar setInterval() pero no se bien como implementarlo, si me pudieras ayudar serias mi héroe jejeje, de ante mano muchas gracias. Saludos de Chile.

[@francofallavollita]

Buenas! Encontraste la manera de hacerlo? Muchas gracias!

[@joaquingerez1952]

Muy buen video, gracias!

[@EduardoFierroPro]

Muchas gracias Joaquin! 😊

[@erned.]

Excelente carrucel, me gustaria tener el cogido javascrit para touch al verlo en movil, muchas gracias

[@ginomilthonlevanocarh931]

Muy bueno Edu!!! 👍🏾

[@EduardoFierroPro]

Muchas gracias Gino!! 😊

[@soydiegovargas]

nooooooo te preocupes!!!! Saludos Crack! Excelentes videos de Tik Tok!

[@EduardoFierroPro]

Muchas gracias crack!!! 💪🏼💪🏼💪🏼

[@FrankGP.com.]

Justo lo que necesito

[@EduardoFierroPro]

Pues a darle caña ahora!!

[@FrankGP.com.]

@@EduardoFierroPro me encanto la logica de javascript, deberías hacer una lista de reproducción de los ejercicios de js

[@jeffersonsalazar668]

Brutal.... me suscribo bro.... uno de los dolores de cabeza y como a mi me gusta sin usar librerias...

[@EduardoFierroPro]

me alegro que te haya servido! Muchas gracias por el apoyo cruck!! 😊

[@felipepino834]

gracias por todo cruck ,esto es lo que falta en la web , enseñar como funcionan las cosas y de donde vienen , creo que esto pasa porque el mundo de la programacion esta pasando a otro nivel de abstraccion , creo que cada vez es mas complicado aprender algunas cosas , ya que las bases de codigo vanilla estan todas en las librerias y nosotros solo implementamos metodos , se alarga un poco la curva de aprendizaje , ya que cada vez se aleja mas la informacion de las bases de la programacion y solo hay que desarrollar mas rapido , chatGPT nos crea codigo ¿pero lo entedemos?. aunque el desarrollo sea mas rapido ,comprender un lenguaje a tope se hace mas complicado.

[@desarrollo-web8147]

Crack!!!

[@EduardoFierroPro]

Mákina!!

[@felipemolanocorredor4078]

toma tu like, tu suscribir buen hombre, jajaja muy bueno tu canal mi hermano, gracias

[@EduardoFierroPro]

Jajaja muchas gracias Felipe!! 😊

[@diegoguarise660]

Un capo

[@EduardoFierroPro]

Un groso

[@MiguelAngel-mf3yu]

puedes poner un tutorial como importar los mixed y todo eso que pusiste en el css y tambien como agregar el neomorphismo sin copiar de la web?

[@EduardoFierroPro]

Ese vídeo se viene!! 😊

[@joanstivenbarbosagaleano6215]

Excelente video!

[@NeekaRostran]

Otra Pregunta, note que un id en un button o un afecta a a todos los elementos dentro de un div y fuera del div padre, pero no daña al padre, porque???

[@nharennlopez7578]

Crack, ídolo 👏🏻

[@yamilaprosdocimo2294]

Guay haberte encontrado!!!

[@EduardoFierroPro]

Muchas gracias Yami!! 😊

[@sebastiangarces4408]

Muy buen video amigo en serio me ayudó, pero hay personas que no entienden del todo lo que haces o algunas pequeñeses, pues yo por ejemplo cuando agregaste el transform en js, al momento de poner el translate colocaste ` `, yo coloqué ' ' las comillas normales pues pensando que no importaba cual pusieras, estuve un buen rato buscando el error y era simplemente eso, solo lo digo para que tomes en cuenta algunas cosas pero muy buen video

[@juancarlosvm5397]

excelente video

[@EduardoFierroPro]

Gracias Juan!! 😊

[@agustinaguirre5251]

Hola una pregunta como haces el @include o que deberia poner donde dice por ejemplo var(--sombra-ppal), -1em -1em 2em var(--sombra-sec)

[@EduardoFierroPro]

El @include lo hago gracias a SCSS, lo explico aquí 😊👉kzbin.info/www/bejne/Y4etl5iEgZKJfpI También puedes ir a Github y ver el resultado final en CSS 🤘

[@agustinaguirre5251]

@@EduardoFierroPro Muchas gracias por tomarte el tiempo de responder, ya vi todo, muy claro, mi ultima pregunta es, que seria sombra-ppal y sombra sec? a que hace referencia ppal y sec

[@lugaresdelmundoHD]

muy bueno!

[@valeriagianetta7142]

hola!!Me encantó el video,pero necesito tu ayuda, primero hice el código mirándolo, no me funciona, desp copie el tuyo y tampoco, qué puede pasarme?? Será que no tengo nada descargado respecto a assets que no se qué es, espero tu respuesta por favor

[@victorianavarroocampo9572]

Me encanto! Excelente! Pude seguir todos los pasos pero no logro hacerlo funcionar con el js. No se si identifica el archivo (js). Agrego la etiqueta script en el header del html con la ruta pero no hace nada. Alguna sugerencia?

[@jonathanc2261]

Excelente video bro, solamente me quedan algunas dudas con lo que contenia el mixin ya que no pude entenderlo bien, podrias explicar eso? y otro error que tuve que al poner imagenes es como que ocupa toda la pantalla, como podemos adaptarlo a un sitio?

[@sarii2_96]

ostras pero lo que no entiendo es que tienes 3 documentos creados y el doc q está vinculado al html es de extensión ".css" en cambio estabas metiendo todo en el ".scss" No entiendo TT

[@d44rkph03n1x]

¡Me encanta como quedo! Pero no se por qué cuando agrego las etiquetas img me deja de funcionar el position fixed de mi header ¿Alguién sabe por qué? No encuentro documentación en ningun lado donde se pueda ver la interferencia. Es eso, porque comento las etiquetas y funciona.

[@peteraspiazu3324]

y si le quisiera meter 11 imagenes ese calculo de posicion * -50 aún serviría?

[@angelodiaz4412]

Hola Peter, el calculo porcentual tendría que ser proporcional a la cantidad de imagines, por lo que la multiplicación por -50 solo seria valida para un carrusel de dos imágenes, yo hice uno con cuatro y tuve que multiplicar en la variable de operación por -25 y funciono perfecto. Saludos

[@guidohuancare4815]

Excelente el video una consulta como hago si lo quiero vertical el carrusel y lado derecho. gracias

[@isaacdeleon4250]

Y si no se la cantidad de imagenes que voy a agregar? porque las imagenes estaran en una base de datos y la cantidad de las mismas puede variar? Por ejemplo puede que tenga 3 fotos/imagenes de un carro o 2 fotos/imagenes de un camion

[@EduardoFierroPro]

Buenas Isaac, para ello habría que automatizar el código. Contar desde JS el número de imágenes, crear dependiendo del número de imágenes. 😊 Se vendrá en un futuro vídeo!

[@danielcristophervazquezaya782]

@@EduardoFierroPro hola Eduardo, muy buen video... ya tendrás ese video ?

[@peteraspiazu3324]

y como harías un slider que sea responsive, es decir que comience en escritorio con 4 imagenes visibles y vaya moviendose de una en una pero siga manteniendo 4 imagenes visibles, luego cuando la pantalla vaya reduciendose sean 2 imagenes visibles y por ultimo en pantallas muy reducidas sea 1 sola imagen como los slider tipicos

[@alessandrojosuemorabravo2153]

por qué no me salen los @include? no entendi esa parte uu

[@EduardoFierroPro]

Lo siento, mea culpa, pero la estoy arreglando. Aquí es donde explico ese mixin desde cero 👉 kzbin.info/www/bejne/nmTchGSIqq5-sJY

[@alessandrojosuemorabravo2153]

@@EduardoFierroProMuchas gracias

[@alanchavez3752]

Me encantó el video, solo una duda: veo que en el CSS agregas siempre la clase "carrusel" y le das estilos. Yo tuve que dejar solo la classe una vez para tener el resultado. ¿Es correcto? Gracias

[@johanhenao8227]

amigos como estan y un saludito para el master eduardo tambien...mi pregunta es como hago para escribir el neomorfismo, lo escribo en el css y me presenta problemas, gracias

[@AltoViajeBlog]

Hola, seguí el video y puse el carrusel en un proyecto en el que estaba trabajando y tengo algunos problemas. NEcesito que arriba de la foto haya un h2 y un h3. Y son 4 slides. Entonces dentro del div grande puse 4 divs y dentro de cada div de esos puse la img, el h2 y el h3. En puntos puse 4 li. Así que creo que el html está ok. En JS, creo que lo que se tiene que correr cada slide es un 25%, así que hice let operacion = posicion * -25. Y en CSS, en debería tener .carrousel .grande con un width: 400%; pero si pongo 400% solo veo una de las img muy grande. Y si lo pongo en 200% es bastante extraño lo que pasa. Aparece la foto del ultimo slide con los titulos del primero, y el resto de las fotos no se ven, pero sí los títulos. Y los puntos, la clase activa (fondo azulado) aparece entre los puntos negros. No tengo idea qué hice mal. ¿Podrías ayudarme?

[@EltioCrazy]

No me quedo el CSS. Instalaste algo? el @include. Tambien el activo no me funciona algo

[@EduardoFierroPro]

Estoy utilizando SASS por eso esa parte no os funciona como tal. Aquí explico qué es @include flex() 👉 kzbin.info/www/bejne/nmTchGSIqq5-sJY

[@Marta-gv4gt]

Gracias por el video, es difícil encontrar videos con javaScript actual pero algo he hecho mal pq al disminuir pantalla se descuadra ??

[@magalychurata]

Buenas No reconoce @include neo en el ide visual code T_T. Como lo soluciono?

[@11winding]

podrias hacer un carrusel de imagenes pero como sifuera un album de fotos?

[@JAN-dp1lx]

yo tengo un problema con los tamaños de los elementos, cuanto deben medir los hijos dentros de los contenedores, tienes algun video de eso?

[@wilmermedina7258]

Gracias por el video, una pregunta un poco fuera de tema, cómo configuras el vs code para que cada etiqueta tenga esa distancia en cada tab? es decil, el espacio horizontal que hay entre padre e hijo, me resultaría mucho más cómodo porque con mi configuración actual es un poco dolor de cabeza ver el código

[@wilmermedina7258]

Pensé que era configurando el tab-size pero abajo vi que tienes espacios: 4, al igual que yo

[@xgilbert1921]

entonces como se puede hacer un sorteo, con imagenes y como manipular el tiempo para que pasen automaticamente de una a otra muy rápido?

[@marinafabijan2956]

la verdad que no me funcionó intenté instalarme el sass y todo, pero no me reconoce nada, ni lo que hice en java, y literal tengo todo igual a lo que hiciste vos y no me saltó ningún error (ni en google ni en el visual)

[@lucaj8074]

Cuando has empezado con los neomorfismos me has asustado

[@landscommunity6288]

Hola Eduardo! gracias por este video me está ayudando bastante, solo que me atoré un poco, al declarar let operacion = posicion * -50 me marca el error ts 6133 diciendo que operacion esta declarado pero nunca será leído, que puedo hacer para corregir eso y pueda ejecutar el código? de antemano agradezco tu ayuda.

[@nataliavergara470]

hola no me marca la opcion del neomorfismo,ayudaaaa

[@AlexanderCastilloIlovegod]

el codigo de javascript da error y a mi no me funciono el desplazador de imagen.

[@arturo8883]

Hola, como logro tener mas de 2 carrusel, Gracias y gran contenido

[@selah3977]

como se aplica el neomorfismo? me perdí en esa parte.

[@EduardoFierroPro]

Es algo que explico aquí 👉 kzbin.info/www/bejne/fXXHe2WwmraUjLM

[@adalbertespana235]

Hola me puedes ayudar, como le pongo hipervínculo o un link a las imágenes sin que me cambien de tamaño. gracias

[@DanielDiaz-cr7me]

Una pregunta cómo podría hacer que se desplace sólo

[@EduardoFierroPro]

Lo explicaré en un vídeo de unas semanas 😊

[@nychu4]

Hola eduardo , te queria comentar , necesito tener varios carruseles como ese pero que se adapten a un grid de columnas y filas iguales , he probado a hacerlo en mi pagina pero me petan los carruseles y las imagenes de dentro , sos please.

[@MiguelAngel-mf3yu]

donde veo el curso completo de css , crack ?

[@EduardoFierroPro]

No hay curso completo de CSS! 😗

[@carlosb.9437]

Por que no me sale como tu? o cual es el código para implementar neomorfismo? Muchas gracias

[@EduardoFierroPro]

Porque tengo que explicar los mixins de SASS y es un vídeo que se viene pronto 😊

[@Silkroad_00]

@@EduardoFierroPro gracias 🙏. Abrazo !

[@waldemarrosales9003]

tmr, no tienes un curso para entender mejor todo?, esta muy bueno la idea planteada, pero me perdi en el javascript..

[@elianasolis3015]

No me quiere salir el @include neo(). Que debo hacer?

[@EduardoFierroPro]

Puedes ver el código que tengo subido en Github para comprobarlo, pero tengo un vídeo sólo hablando del mixin neo paso a paso 😊👉 kzbin.info/www/bejne/fXXHe2WwmraUjLM

[@miaurwick7733]

tengo un problema con la parte donde agrega sass 8:47 y es que el cambo no se aplica a pesar de tener el código bien solo no ocurre nada y ya instale el paquete de sass y todo

[@EduardoFierroPro]

Miaurwick! Perdona por no poder ver el comentario antes, usa este programa que te resultará más fácil sin instalar nada por la terminal 👉 kzbin.info/www/bejne/qnLVpX-PodZsrdU

[@daniel-24gra79]

man el neo no me sirve, y tampoco veo que lo expliques del resto buen tutorial

[@EduardoFierroPro]

Toda la razón Dani, peeeero lo explico aquí 👉kzbin.info/www/bejne/nmTchGSIqq5-sJY

[@daniel-24gra79]

@@EduardoFierroPro sos una maquina man

[@MiguelAngel-mf3yu]

par que sirve nowarp y warp

[@pedrochavezcontreras8017]

como haria para que sea automatico

[@moroco1013]

voy a dar de baja netflix crack! no te calmes nunca

[@EduardoFierroPro]

WTF?!?! 😂