Тёмный

Carrusel | HTML y CSS 

GYPZ
Подписаться 5 тыс.
Просмотров 146 тыс.
50% 1

Encuentra todo mi contenido, redes y servicios, aquí.
👉 gypz24.com/links/
👉 Repositorio con el código: github.com/YPZ...
#gypz #gypz24 #programadaparaganar #programming #carrusel #csscarrusel #html #css

Опубликовано:

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 227   
@andreszeiden
@andreszeiden Год назад
Excelente explicación para los que tenemos poca experiencia con html y css. Muchas gracias!! un saludo!
@Nightmich
@Nightmich 2 года назад
Eh visto muchos videos pero la mayoría no explica tan en detalle como tú. Muy claro y además con el ejemplo en github. Muchas gracias, le di a seguir a tu canal 😊
@EltioCrazy
@EltioCrazy 2 года назад
Muy buena explicacion. En mi opinion es el mejor turorial de un carrucel en HTML y CSS
@DanielFernandez-sf8sn
@DanielFernandez-sf8sn 10 дней назад
Gracias por tu ayuda, es muy dificil encontrar videos en español sobre caruseles, en verdad muchas gracias
@edvinreyes4572
@edvinreyes4572 3 года назад
Hola, eeeh porfavor sube mas videos de html, css y si puede de javaScrip eres muy buena explicando he visto muchos videos de como hacer un carrusel pero a nadie le entendia, solo a ti te entiendo explicas muy pero muy bien.
@diego49451
@diego49451 3 года назад
Siii por favor
@javieralejandrogamboa5980
@javieralejandrogamboa5980 2 года назад
simp
@Seforagf
@Seforagf 2 года назад
tienes razón, razona paso a paso, es la mejor que es escuchado explicando
@fredishernandez8205
@fredishernandez8205 2 года назад
Maravillosa explicación,justo lo que buscaba,sigue así,excelente vídeo,saludos cordiales.
@Ricker-qv9mh
@Ricker-qv9mh 2 года назад
Una explicación genial!!! gracias por explicar los detalles eso hace que se entienda mejor.
@Un.personajecualquiera
@Un.personajecualquiera Год назад
Excelente! vi mil tutoriales y nunca pude lograrlo hasta ver el tuyo! mil gracias
@CarlosDiaz-rt8ny
@CarlosDiaz-rt8ny 7 месяцев назад
Muchas gracias, no solo hice el carrusel si no que también aprendí cada una de las etiquetas que usaste, gracias por el video
@whenduxo6709
@whenduxo6709 9 месяцев назад
Me encanta como explica, es tan facil entenderla me a quedado bien llevo rato intentado de que me quede bien y este es el único que me funciono
@andreluna4971
@andreluna4971 11 месяцев назад
Excelente video, muy bien explicado y muy útil cuando la profesora no enseña nada. Muchas gracias!
@GYPZ
@GYPZ 11 месяцев назад
Gracias! Que bueno saber que te ayudó ⚡🔥
@Pr4dos
@Pr4dos 4 месяца назад
Me encanto tu video!! sigue asi, saludos desde españa
@GeanHuamanSolis
@GeanHuamanSolis 2 месяца назад
Despues de ver 9 video con este me quedo, gracias
@gustavogromas5822
@gustavogromas5822 6 месяцев назад
gracias, seguí el paso a paso y salió todo ok, estoy aprendiendo!!! gracias!!!.
@dantetello491
@dantetello491 Год назад
PERFECTO justo un tutorial de lo que necesitaba gracias !!
@GYPZ
@GYPZ 11 месяцев назад
Que bueno saber que te ayudó! 🔥⚡
@DiegoGutierrez-gu5ui
@DiegoGutierrez-gu5ui 2 года назад
Lo difícil lo haces facil, de muchos que he visto, este esta de número 1...
@zeetrj
@zeetrj 10 месяцев назад
De esos videos que te sacan de apuros de proyectos finales 10/10
@GYPZ
@GYPZ 10 месяцев назад
Espero te haya funcionado! 🔥⚡
@JesusMartinez-eh4hp
@JesusMartinez-eh4hp 2 года назад
YOU are a live saver. i’ve been losing it trying to find one that works, and this one did. thankyou so much
@OrionGen
@OrionGen Год назад
Maravillosa voz, maravillosa jugad.. digo video! excelente explicación y enseñanza, saluditos :)
@GYPZ
@GYPZ Год назад
Saludos, Muchas gracias...!
@ManuelLobos88
@ManuelLobos88 2 года назад
Hey! Excelente video! Saludos desde Chile! Gracias por compartir
@noelmiranda3788
@noelmiranda3788 2 года назад
EXPLICAS MUY BIEN DEBISTE ESTUDIAR MUCHO DINOS CDONDE ESTUDIASTE YSI PUEDES DARNOS MAS CLASES COMO ESTA MUCHAS FELICIDADES NO PIERDAS ESE DON
@erick.hdz72
@erick.hdz72 2 года назад
Increíble video, no dejes de subir nunca, gracias!
@arssus5715
@arssus5715 2 года назад
Excelente video, muy bien explicado y el resultado es perfecto
@ivanser1233
@ivanser1233 7 месяцев назад
Muy lindo video, el unico video que me sirvio al 100%. Estoy aprendiendo HTML y CSS y me gustaría que subieras video para aprender Javascript 😊
@petersauma1927
@petersauma1927 4 месяца назад
Excelente video, yo uso bootstrap y si quiero customizar no puedo. Este carrusel me lo copio y me servira de por vida. Muchas gracias
@raulcedeno1589
@raulcedeno1589 11 месяцев назад
Excelente, fue de gran ayuda y aprendí algunos conceptos que necesitaba.
@GYPZ
@GYPZ 11 месяцев назад
Me alegro que te haya funcionado! ⚡🔥
@marieltorres2873
@marieltorres2873 2 года назад
venia buscando algo sencillo y me encontré esto! gracias me sirvió de mucho!
@jesusadrianamancayacuna1346
@jesusadrianamancayacuna1346 2 года назад
Muy buen video, eres muy buena explicando, literal me dejaste sin palabras y a la vez me diste un alivio profundo ya que no era necesario realizar un carrusel con Java ya que yo recién estoy en proceso de aprender mas a profundidad HTML, esto no me lo enseñan y quería incluir en mi proyecto un carrusel, muchas gracias.
@MecanicaBordenave
@MecanicaBordenave 11 месяцев назад
Muchas gracias, explicas muy bien. sigue así ! ! !
@GYPZ
@GYPZ 11 месяцев назад
Gracias a ti...! 🔥⚡
@patriciazaa2321
@patriciazaa2321 Год назад
gracias excelennte video claro y preciso sin tanta habladuría desesperante
@gabrielagalvis4775
@gabrielagalvis4775 3 года назад
Hola, muchas gracias por el aporte y la explicación, el resto de tutoriales incluían Java Script y tu lo lograste sin usarlo, sería bueno si nos enseñas en como hacer ese carrusel responsive :D Nueva sub
@parodiastutele
@parodiastutele Год назад
Excelente profesora, explica muy bien
@williamshung7553
@williamshung7553 5 месяцев назад
Brutal explicación. Me gustaría ver un video que el carrusel sea automático
@perisitoor7266
@perisitoor7266 Год назад
Gracias a ti ahora puedo terminar mi pagina web
@GYPZ
@GYPZ 11 месяцев назад
Si se puede 💪🔥⚡
@alerxses
@alerxses 2 месяца назад
El truco del #idname en la etiqueta "a" es muy útil en SPA. Hace 4 meses vi este video, pero lo volví a ver para usarlo con paginación en JS obteniendo los hash de la url.
@AnaZorzi-o8e
@AnaZorzi-o8e Год назад
reina de mi corazon, nunaca voy a poder agrederte lo que me haz ayudado con este video
@GYPZ
@GYPZ 11 месяцев назад
No hay de que, gracias! 🔥⚡
@lauther_27
@lauther_27 2 года назад
Porque no te encontre antes ahhh, que buen video lo vi del inicio al final, muchas gracias me ayudaste un montón ❤️, saludos!
@rafaeljuarezramirez3124
@rafaeljuarezramirez3124 10 месяцев назад
muy buena. Nunca se me habia ocurrido hacerlo con "id" muchas gracias
@xiosagikana28
@xiosagikana28 2 года назад
Muchas gracias por el tutorial. Pocos likes tiene este vídeo.
@dekogill6552
@dekogill6552 4 месяца назад
eres mi nueva profesora virtual😍😍🤩
@alejandrogarcia4387
@alejandrogarcia4387 8 месяцев назад
Que buen video, me gustó mucho la explicación y tu voz, salu2 y bendiciónes.
@GYPZ
@GYPZ 8 месяцев назад
Muchas gracias...! También por tu tiempo para dejar un comentario 🔥⚡
@yeslybravo4839
@yeslybravo4839 Год назад
hermosa explicacion nena gracias me ayudo mucho :)
@GYPZ
@GYPZ Год назад
Muchas gracias! Que bueno que te haya ayudado.
@camigrafica
@camigrafica 3 месяца назад
Sos una genia!!!
@cofifs
@cofifs Год назад
Muchisimas gracias por explicarlo tan bien😸👍
@GYPZ
@GYPZ Год назад
No hay de que, gracias a ti! 🔥⚡
@jae2015
@jae2015 11 месяцев назад
Muy buena explicación gran video
@GYPZ
@GYPZ 11 месяцев назад
Muchas gracias! ⚡🔥
@yurietmosquera6400
@yurietmosquera6400 2 года назад
Genial ejemplo, muchas gracias por la ayuda
@herlainemarinramirez7493
@herlainemarinramirez7493 Год назад
Eres la mejor del mundo !
@calixtop.4337
@calixtop.4337 2 года назад
Muchas gracias por tu explicación!
@miqueaspalacio3271
@miqueaspalacio3271 2 года назад
Loool. I legit spend 6 years using gms before finally getting serum. I was making blown out saw softs and exporting them to Edison
@dorsal1157
@dorsal1157 3 года назад
necesito terminar una pagina web como tarea, y me estas salvando la vida, btw tienes linda voz
@edgaralejandrogonzalez6689
@edgaralejandrogonzalez6689 3 года назад
Ya somos dos jajaja
@Adrii_hanna
@Adrii_hanna 2 года назад
Super¡ somos tres jaja
@ALANJOSHUAMOLINACARRILO
@ALANJOSHUAMOLINACARRILO Год назад
Muy buen video, me ayudo muvho a mi tarea gracias.
@gustavo.gomez.1994
@gustavo.gomez.1994 2 года назад
Brutal! Super simple y útil!
@elnegro6807
@elnegro6807 2 года назад
que buen video muchas gracias por la buena explicacion me sirvio demasiado🥰🥰🥰🥰
@marxtron3733
@marxtron3733 2 года назад
Muchas gracias, tu video me ayudo mucho .
@sawaito
@sawaito Год назад
Te amo, esto es genial!!
@GYPZ
@GYPZ Год назад
Muchas gracias! ⚡🔥
@cuitlahuacmartinez3887
@cuitlahuacmartinez3887 2 года назад
gracias este video esta bien espero sigas haciendo mas gracias.
@milagrossanchez513
@milagrossanchez513 2 года назад
there! Thanks a lot for the help, I'm going to subscribe to your channel and keep up with all the videos!
@ignacioleon6859
@ignacioleon6859 2 года назад
handy for resetuping s or creating karaoke tracks. Thanks for the recomndation!
@asderel09
@asderel09 Год назад
Oye eres una chingona!!! super bien explicas, lo entendí todo, me funcionó!
@juanchoescalante9291
@juanchoescalante9291 2 года назад
Bella voz .. Sencilla explicacion.. === new suscriptor xD
@edisonusca2942
@edisonusca2942 7 месяцев назад
Eres una bakana, gracias
@alexander3488
@alexander3488 Год назад
Woo increible, muchas gracias
@GYPZ
@GYPZ Год назад
Gracias! 🔥⚡
@SoofiiConstanza
@SoofiiConstanza 2 года назад
Gracias!!! Explicas muy bien
@kendalimport8565
@kendalimport8565 2 года назад
Thank you so much. Learned a lot of new useful tNice tutorialngs about soft soft!
@modularbros2862
@modularbros2862 Год назад
muchas gracias, muy útil
@guidomartinez3820
@guidomartinez3820 Год назад
muy buen video, gracias
@borisavendano5205
@borisavendano5205 2 года назад
Woah, great video mate!
@danielaquilino4805
@danielaquilino4805 2 года назад
Muy ingeniosa al usar a las anclas para hacer el slider
@julioavellanos4489
@julioavellanos4489 2 года назад
buenas que tal, les hago una pregunta a los que ya armaron un carrousel, es posible que cuando le das click a las flechas: flechasI flechasD No lleven todo el filo de la pantalla a donde esta el carrousel, ya que lo quise replicar en un proyecto pero mi problema es que lo tengo ubicado debajo del header y siento que es muy aparatoso que al hacer click en una de estas se pierda el foco del header mismo y lleve el borde de la pantalla al carrousel. Estuve buscando temas relacionados para evitar el comportamiento que pasa desde el al #ID respectivo pero no encontre nada sobre el tema
@jorgeeliassantosacosta6769
@jorgeeliassantosacosta6769 2 года назад
amigo encontraste alguna solucion? tengo el mismo problema
@gustavo.gomez.1994
@gustavo.gomez.1994 2 года назад
Hay varias opciones que se me ocurren... En vez de poner los contenedores de las imágenes hacia abajo, le puedes dar un display flex al contenedor padre y así al momento de activar la etiqueta a, esta únicamente va a hacer el desplazamiento hacia sus laterales y no hacia arriba, esto en la teoría, no estoy seguro si estoy pasando por alto algún comportamiento en especial, otra opción podría ser darle un position fixed al header, con un width del 100% y un top y left de 0 y al contenedor padre darle un margin superior del mismo alto que el header para que este, a la hora de dirigirse hacia el top del contenedor, respete ese espacio del header... Aunque pensándolo bien, con el margin, creo que por si solo podría solucionar el problema, pero de todas formas podrías tener en cuenta usar el header en fixed o sticky para ayudar a que el slider funcione correctamente... Si de algo te sirve o si encuentras alguna otra solución, apreciaría que nos lo compartan! 😃
@franciscoalejandrodelavega1411
@franciscoalejandrodelavega1411 2 года назад
muy bien explicado, gracias por el tutorial
@itsangiee184
@itsangiee184 Год назад
Gracias, gran video ❤
@GYPZ
@GYPZ Год назад
Muchas gracias! ⚡🔥
@garmertrixyt465
@garmertrixyt465 2 года назад
muchas gracias, me sirvio de mucho
@dante3048
@dante3048 3 года назад
Me encanto tu video, muchas gracias me servirá para un proyecto de la U
@vjfr255
@vjfr255 Год назад
Excelente video!! Nuevo seguidor! :)
@angelszenfeld8413
@angelszenfeld8413 5 месяцев назад
que god el video, gracias.
@FernandoMunoz-rhcp
@FernandoMunoz-rhcp Год назад
Simple y eficiente
@Angel-gr2kf
@Angel-gr2kf 2 года назад
Muchas grx lo usare para mi proyecto escolar grx :D
@pineapple20nov
@pineapple20nov Год назад
wao, no creí que se podía hacer un slider infinito sin JavaScript. Buen video
@GYPZ
@GYPZ Год назад
Gracias! ⚡🔥
@kevinchoque7578
@kevinchoque7578 2 года назад
great thanks for that! Very clear and articulate!
@florbarbaratorreshernandez936
@florbarbaratorreshernandez936 2 года назад
Nice tutorial.... Very helpful
@ivansuarez7518
@ivansuarez7518 2 года назад
Que habilidad señorita. podria decirme si se puede hacer como en js, que le metes un temporizador o algo de eso? tipo que cambie las imágenes solo o es muy complicado porque, este es un nivelaso y me imagino lo que debe ser de complicado si se puede hacer .
@GYPZ
@GYPZ 2 года назад
Hola...! No es nada complicado, simplemente la técnica es diferente, espero sacar un video de eso pronto.
@MozambiqueChurrascoTortillasde
hola, me encanto este slider, tengo una duda, lo que pasa es q el slider lo agregue a una pagina que estoy haciendo pero cuando estoy un poco mas abajo de la pagina y presiono la flechas del carrusel la pagina sube bruscamente y no se que hacer. me encanto como explicas
@GYPZ
@GYPZ Год назад
Hola, Muchas gracias! Respondiendo a tu duda, es comportamiento esperado por qué es lo que los navegadores hacen con la etiquetas , las enfocan cuando clickeas sobre ellas, aunque está forma de hacer un carrusel es útil, puedes encontrar otras que se acomoden más dependiendo lo que quieras lograr 🖐️
@kevinvazquez5714
@kevinvazquez5714 4 месяца назад
Que grande, gracias.
@ernestoguevara2211
@ernestoguevara2211 9 месяцев назад
los elementos A,B,C,......, si lo definimos elementos de un arreglo, como se expresaria en el html ??
@drnet21
@drnet21 2 года назад
Muchas Gracias Crack
@jorgeeliassantosacosta6769
@jorgeeliassantosacosta6769 2 года назад
meti el codigo pero el carrusel lo puse mas o menos a la mitad de mi pantalla, no arriba como lo tiene GYPZ pero cuando cambio de imagen me baja en la misma pagina automaticamente hasta donde pone el carrucel en el tope, alguien sabe como solucionarlo y que cuando le de a la flechas lo unico que cambie es la imagen?
@nameteGM
@nameteGM 8 месяцев назад
Me pasa igual. Sabes cómo arreglarlo
@francoyahuana
@francoyahuana Год назад
Gracias amiga, como hago para que no se desplace . Tengo el carrusel en el centro de la pagina y se desplaza hacia abajo.
@maca2497
@maca2497 Год назад
GENIA!!! GRACIASSS
@isaacjehielmg4799
@isaacjehielmg4799 3 года назад
Muy buen video, gracias.
@mauriciomendozaacosta723
@mauriciomendozaacosta723 Год назад
Una pregunata si yo quisiera hacer un carrusel de imagnes y al hacer click en una imagen me lleve a un enlace externo
@FacundoTomasQuirogaAstrada
@FacundoTomasQuirogaAstrada 10 месяцев назад
Sos un capo/a ❤
@GYPZ
@GYPZ 10 месяцев назад
Gracias!!! 🔥⚡
@lucasmatiasalbrigi1982
@lucasmatiasalbrigi1982 Год назад
com haces el carusel de facebook el de las historia viste q son individuales?
@GabbLgt
@GabbLgt 2 года назад
Una consulta, al tocar la flecha, se mueve la pantalla, hay forma de cancelar eso? Porque al tocar, hay cosas importantes q se dejan de ver..
@GYPZ
@GYPZ 2 года назад
Con este método no por que usamos a y el navegador automáticamente enfoca el elemento pero hay otro en donde si
@GabbLgt
@GabbLgt 2 года назад
@@GYPZ muchas gracias.. cual seria el otro metodo?
@cruzubardo
@cruzubardo 10 месяцев назад
dime como se puede poner digamos un traslado estilo niebla para el cambio de imagen y a mi no me fusiona el cambio automático me ayudas
@israelgonzalez6316
@israelgonzalez6316 2 года назад
excelente video te felicito explicas muy bien solo quisiera saber como agregar un temporizador para que cada cierto tiempo cambien solas las imagenes
@DanielDelgado-ge7rs
@DanielDelgado-ge7rs Год назад
con js
@alejandrojoserivascastillo3398
@alejandrojoserivascastillo3398 2 года назад
Muchisimas gracias, no sabia como se llamaba ese proyecto en css, ya que uno lo ve en las paginas y lo quiere replicar pero uno no sabe ni como buscarlo... Si puedes hacer un video de proyectos, o nombres de proyectos en css seria genial
@GYPZ
@GYPZ 2 года назад
Apenas saque uno llamado "Puntero Luminoso" y "Efectos en Puntero" te lo recomiendo muchísimo
@jorgealamargarcia3712
@jorgealamargarcia3712 Год назад
gracias por la información ,me puedes decir que Plugins utilizas para que te salgan los colores de guía que tienes entre los div
@GYPZ
@GYPZ Год назад
Es la extensión de Visual studio code, indent rainbow 🌈
@hedaloff7839
@hedaloff7839 2 года назад
Amo
@raayzen
@raayzen 2 года назад
Hola, muchas gracias por tu vídeo, muy bn explícado. Disculpa podrías subir un vídeo xfa o como sería para automátizar el cambio entre elementos cada 30seg o 1 min
@ziwafk8395
@ziwafk8395 2 года назад
Buen video, explicas muy bien :D
Далее
Award Winning Animation With Only 20 Lines Of CSS?
6:59
🎙Пою РЕТРО Песни💃
3:05:57
Просмотров 1,3 млн
Tarjetas Giratorias (flip card) | HTML y CSS
12:00
Просмотров 73 тыс.
Carrusel con Html y Css sin JavaScript
13:00
Просмотров 23 тыс.
The Easiest Way to Build Websites
10:56
Просмотров 512 тыс.
Play and Pause in Infinite Slider with CSS Only
13:24
Responsive Slider Using HTML & CSS Only
10:34
Просмотров 249 тыс.
HTML and CSS Project Tutorial: Pure CSS Image Slider
7:41