COMO hacer un SLIDER AUTOMATICO PERFECTO con HTML y CSS en MENOS DE 9 MINUTOS *desde cero*

Aprenderás a implementar un slider automático usando únicamente HMTL5 y CSS3 en menos de 9 minutos.
DESCARGA EL ARCHIVO AQUI: drive.google.c...
▼¡SÍGUEME EN MIS REDES!▼
✔TWITTER: / yoshcorona
✔INSTAGRAM: / yoch.sc

[@jorgeeliasorozco9101]

Amigo agradezco tu esfuerzo, pero cometes un error cuando estas escribiendo el codigo, exactamente en el minuto 5.22, ese código no va en; (.slider-frame). debe ir en (.slider-frame ul). comparalo con el que tienes en el drive y hallaras el error...

[@codeglitch1884]

Totalmente de acuerdo! Lo voy a corregir en un próximo video

[@alejandrasanchezsalazar3935]

Gracias por tu comentario logré solucionar el error, casi que noo!

[@ronnyfreitez1731]

Muchas gracias me ayudo mucho tu buena observacion

[@kokito4753]

Ufff hermano gracias, con razón salía mal, igualmente agradezco el video y el comentario :D

[@AngelCh10z]

muchas gracias por la info con razon no me salia, gracias a ti se logro ❤❤❤❤

[@fred0479]

Muy simple y excelente resultado para el tiempo, normalmente los videos de sliders automatico son de 40 minutos!! Muy buen video.

[@codeglitch1884]

Gracias Bro!

[@guillermohf]

Hola. Excelente video me ayudo mucho. Pero hay un pequeño detalle en el minuto 5:08. El "animation" lo colocas en la clase ".slider-frame" y debe ir en la clase ".slider-frame ul" Gracias por el aporte.

[@eduardosaroka7967]

Gracias Guille, no me estaba funcionando :D

[@codeglitch1884]

Gracias por el comentario Guillermo, seguro que subiré algún video con la info actualizada

[@miriamalcorta9555]

Gracias a tu comentario me dejé de dar la cabeza contra la pared!! Muchas gracias!

[@christianllumi]

Excelente aporte, justo eso le comentaba, no al poner el animation en slider.frame la primera imagen solo cargaba, de la segunda adelante cargaba en blanco sin nada, pero con tu aporte se solucionó, gracias.

[@Soy_Wady_RD]

muchisimas gracias bro no me funciono y me altere y luego vi tu comentario y funciono a la perficcion muchisimas gracias✔✔✔✔

[@yosedcamilosanchez4963]

Ufff maquina no te imaginas cuanto tiempo llevaba tratando de hacer eso, eres un duro!

[@mag1076]

gracias RECIEN ESTOY APRENDIENDO Y QUERIA AGREGAR UN SLIDER VI COMO 4 VIDEOS NINGUNO ME FUNCIONO Y ENSERIO GRACIAS LO LOBRE TE GANASTE UN SUSCRIPTOR

[@danielleon8451]

gracias por compartir tus recursos con toda la comunidad, nunca cambies

[@codeglitch1884]

Grande bro! ♥️

[@manuelcolin7037]

Gracias por compartimos esta super idea, espero y sigas haciendo mas videos.

[@codeglitch1884]

Pronto! 🚀

[@lorenatorres270]

Dios!!! Gracias por hacer este video, me salvaste una nota de clase. GRACIAS

[@codeglitch1884]

¡Que bueno que te haya servido!

[@kineticavip]

Ganaste un nuevo seguidor, con campanita y todo! Exitos y gracias

[@Kaaren_mor]

Explicas súper bien espero sigas haciendo vídeos!!!

[@codeglitch1884]

Gracias, pronto subire un curso de HTML Y CSS desde 0 :)

[@eiros147]

Excelente y muy simple slider, la verdad q me ayudo bastante con un proyecto q me estaba matando la cabeza.

[@codeglitch1884]

Excelente! Que bien que te sirvio crack!

[@xXkeissiusXx]

Muchas gracias bro me sirvió, justo lo que necesitaba

[@codeglitch1884]

Que bueno que te sirvió hermano Saludos Bro!

[@user-hs7yc7pv4v]

TE GANASTE UN SUSCRIPTOR GRACIAS POR DEJARNOS EL CÓDIGO 😄😄 🎉🎉🎉

[@hugocangi6214]

Buen dia CodeGlitch recien termine el programa te agradezco saludos pase buen dia

[@emilianotruyen6031]

está bueno el tutorial. una cosa que me pasa es que pareciera ser que el tamaño de las imagenes no me cuadra en el html, pero ahora lo arreglo.

[@Eragon09]

pone el animation en el ul

[@franciscougarte7247]

@@Eragon09 me salvaste amigo esa era lo unico que necesitaba graciaas

[@noramorgan7363]

Muchas gracias por este video. Muy bien explicado.

[@codeglitch1884]

Un placer!

[@HisDuckling]

Increible tutorial! Tengo una consulta, copié y pegué los códigos, pero las primeras dos fotos no tienen la transición de slide, si no que la segunda foto simplemente aparece y después las otras si tienen la transición de deslizar. Como puedo solucionarlo?

[@codeglitch1884]

Hola, quizá hay algo mal en el código que transcribiste, intentaste descargar el archivo de prueba y comparar con el tuyo para poder ver donde es que no esta funcionando bien, el archivo lo puedes descargar en la descripción o en el comentario fijado.

[@oscarseguraramos]

Gracias grande, te pasaste.

[@robertrosario1152]

excelente tutorial. te ganaste un seguidor fiel jejejejeje

[@codeglitch1884]

Grande bro!

[@delossantosvivancoabril8830]

muchísimas gracias, eres muy amable y fue fácil entender

[@ulisesmak]

Buen video, me sirvio una banda amigo, gracias!

[@codeglitch1884]

Un placer amigo!

[@EsDaniela]

gracias por este video me ha sido de mucha ayuda para mi trabajo

[@codeglitch1884]

Que gusto que haya sido así Daniela!

[@skerlino]

Ayuda, aparecen las 4 imágenes al mismo tiempo, no se centran y desaparecen todas al mismo tiempo en la animación

[@anagitana9867]

Muchas Gracias me sirvió demasiado.

[@stevenleonmacana1698]

Oye bro, buen video, me ayudo bastante, una cosa, que me esta sucediendo en la animación, y es que resulta que al llegar a la ultima imagen hace algo extraño, en pocas palabras lo que hace es volver a la primera rápido y luego retrocede a la ultima y posteriormente si se devuelve como debería, no se si sepas alguna solución para lo mismo, thx

[@codeglitch1884]

HOLA! Si me muestras tu código, con todo gusto podría revisarlo y dejarte dentro un comentario que paso.

[@stevenleonmacana1698]

@@codeglitch1884 Bro, dime por donde te lo puedo enviar ya que creo que no seria muy cómodo por este medio, thx por la respuesta

[@emilianotruyen6031]

es a causa del "alternate" que está en "animated"

[@stevenleonmacana1698]

@@emilianotruyen6031 Ah vale, y eso se puede solucionar, es que si me da un poco de toc que haga eso thx

[@elmandolinxd3190]

@@stevenleonmacana1698 como lo solucionate?

[@v4l324]

Muchas gracias. Te adoro.

[@codeglitch1884]

🤩

[@acecarti]

Hola, ¿es posible hacer un carrusel, automático y manual con únicamente html y css? ya que mi sitio no me permite utilizar scripts y no puedo usar javascript :( , buen video por cierto :D

[@andyantoniopaz8938]

lo codie igual que en el vide y fue todo un desastre 😂 lo descargue y funciona wtf pero buen video bro ❤👌🏻

[@codeglitch1884]

Jajaja wtf! Saludos bro!

[@nicolasdiazdiaz3973]

Muy buen video 10 puntos me funciono.

[@gonper352]

si quiero usar 11 imagenes de cuanto debe ser el porcentaje de separacion? ?

[@coriacarolina]

venía a preguntar lo mismo, lo pudiste resolver?

[@gonzah9028]

100/11= 9.9

[@martineichel2323]

Muchas gracias maestro!!

[@codeglitch1884]

🫶🏻

[@josiasmiguelcorreatorales4529]

Muy bueno sigue haci

[@codeglitch1884]

Seguro que así será amigo! No olvides suscríbirte para más contenido así

[@alebinetti]

excelente tu explicación

[@codeglitch1884]

Grande bro!

[@gonper352]

cual seria el porcentaje si necesito 11 imágenes?

[@codeglitch1884]

dale el total de segundos que quieres, si quieres 11 imagenes y que cada una dure 1 segundo, serian 11 segundos, y eso de divide entre el 100% ¿me entiendes?

[@PerezLinette]

Hola, como puedo hacer para que las imagenes se sigan moviendo en la misma direccion de manera indefinida? es que no me gusta cuando termina y todo se devuelve de manera rapida. Gracias

[@codeglitch1884]

Puedes cambiar el tipo de animación, quizá ponerle alternate en vez de infinite y eso te dará un resultado diferente

[@katymedina6799]

solo me muestra en el slider una imagen ya lo volvi hacer y hace lo mismo

[@kevinpizarro3]

Si quisiera hacer ese mismo Slide pero mas pequeño y dejarlo en un rincon como se podria hacer?

[@codeglitch1884]

Puedes usar el mismo flexbox con y colocarlos en la orilla, y para que sea más pequeño solo debes cambiar el width y el height de el contenedor.

[@brianstevepulido7100]

tengo una pregunta si quisiera meter un texto en cada imagen como podria hacer para que se viera

[@codeglitch1884]

Solo mételo dentro del div en la imagen que quieras y ya!

[@vitorolivera11]

Muito bom e fácil de entender obrigado 😸

[@codeglitch1884]

Obrigado! ♥

[@Matias_Palacio_V]

Como hago lo de @keyframe con 5 imagenes? No he podido con el calculo de los porcentajes del inicio de cada linea: ¿?% {margin-left: 0%;}

[@codeglitch1884]

Divide tus 5 imágenes entre el 100% del tiempo es decir cada 2 segundos pasaría una imagen

[@EdwinAlexanderVillaTaborda]

Que crack. te pusiste la 10 Ahora como hacemos para que después de que llegue a la ultima imagen, siga en la misma dirección y que vuelva a iniciar en la primer imagen ?

[@codeglitch1884]

Intenta colocar "linear" en el atributo de animation--aqui adentro--:;

[@axelekopi3807]

muy buen video y muy bien explicado

[@codeglitch1884]

Gracias Bro!

[@kevinyahirruizmarmolejo1192]

no se que hise mal pero tadas las imagenes se van en la primer animacion en ves que se valla una se van las 4

[@codeglitch1884]

descarga el recuroso que esta anclado al primer comentario y compara con tu código, seguro encuentras el error!

[@ivethcortez7348]

Hola, necesito ayuda :c no me sale, estoy tratando de hacer funcionar la animación, yo tengo sólo 3 imágenes Te muestro lo que llevo de código: .slider-frame { align-content: center; width: 800px; height: auto; overflow: hidden; margin: 50px auto 0; } .slider-frame ul{ display: flex; padding: 0; width: 300%; animation: slide 9s infinite alternate ease-in-out; } .slider-frame li { list-style: none; width: 100% } .slider-frame img{ width: 100% } @keyframes slide { 0% {margin-right: 0%} 25% {margin-right: 0%} 30% {margin-right: -100%} 55% {margin-right: -100%} 60% {margin-right: -200%} 85% {margin-right: -200%} }

[@codeglitch1884]

Estás dejando tiempo libre tienes que dividir esos 9s entre las tres imágenes, la primera del 0 al 32, la segunda 33 al 66- tercera del 67 al 100 y así ya usas el 100% de tiempo

[@nayelihdz5466]

me pidieron un slider en el encabezado de una pagina web con estructura de rejillas pero tiembla toda la pagina cuando pasa a la siguiente imagen, ayuda porfaa

[@codeglitch1884]

me explicas más a detalle como, así seguro que puedo ayudarte más!

[@sebastiangonzalez1381]

heroe

[@codeglitch1884]

Un gusto!

[@user-un2vg7il9e]

hola amigo, yo tengo una duda, hice todo al pie de la letra y solo se mueve la primer imagen, el resto no cambia y se quedan fijas

[@codeglitch1884]

Tienes bien los frames?

[@CrisChavarríaR]

hola tengo una duda , la imagen es muy grande , como puedo hacer que use todo el ancho de la pag pero no de altura?

[@codeglitch1884]

width: 100vw; o width: 100%; con esto le dirás al programa que te aplique a todo el ancho de la pantalla

[@JebusXDYT]

Oigan saben por qué las imagenes salen pegadas y no una por una?

[@codeglitch1884]

Por el tipo de animación, puedes intentar por steps y así te puede aparecer diferente

[@ezequielsilva6652]

una pregunta, como hago para que el slide quede un poco mas pequeño y alargado hasta los bodes de la pagina? gracias!

[@codeglitch1884]

deberías definir un height(altura de por ejemplo 500px) y un width del 100vw(ancho) y eso hará que ocupe toda la pantalla

[@carrisolucionesinformaticas]

muy bueno

[@codeglitch1884]

🙌

[@ann.voorhees_13]

Hola! Lo copié y pegué pero no sé por qué cada vez que se desliza una imagen queda el borde de la imagen anterior a la izquierda :(

[@codeglitch1884]

Podría ser por el tamaño de la imagen, ¿todas son iguales?

[@juannavarro201]

Oye, yo use un menu en el que al estar en mobile aparecen las 3 rayas y al pulsarlo aparece el menu ocupando toda la pantalla, pero con tu slider el menu no funciona hasta que termina de pasar todas las imagenes, tienes alguna idea del porque y si me puedes ayudar por favor

[@codeglitch1884]

No debería interferir con tu menú a no ser que lo estés metiendo el mismo DIV/Section, eso podría darte algún error o algo

[@Brayan-ig9vi]

bro, el slider se me va hacia la izquierda cuando agrego la animación y también desaparecen las otras imágenes, que hago? :(

[@codeglitch1884]

Quizá has colocado el atributo animation en otro lado, o has intentado descargar el documento para guiarte?

[@JonathanBriones-b8p]

la voz del chico me encantaaaa

[@codeglitch1884]

ay! me sonroja compare jajaja

[@juanxoh1987]

Hola! Que programa usas? Para crear los códigos digo.

[@codeglitch1884]

SUBLIMETEXT3 en el video amigo!

[@yoaos8125]

Me funciona perfecto en Edge, pero en chrome no sirve nunca pasan las imágenes, porque pasa esto?

[@codeglitch1884]

que raro, este ejemplo que muestro esta en chrome 🫠

[@arielfuentes3775]

se puede en vertical?

[@codeglitch1884]

Si seguro que si, jamás eh intentando uno, pero si debe ser posible

[@henryvladimircontreraschav584]

Y para colocar 2 imagenes como seria?

[@codeglitch1884]

No entiendo tu pregunta, en el slider son más de 2 imágenes

[@AlfonsoLi]

Cordiales saludos gracias por el esfuerzo pero ..mi código es exactamente igual pero no funciona ... posiblemente es el navegador.. la versión del IDE etc .. aparece solo la imagen 1 y desaparece todo .. pasan los 16 segundos y nuevamente aparece la imagen1

[@codeglitch1884]

¿Que navegador utilizas?, ¿Has intentando en otro navegador?

[@facundomazza3131]

Buenas quiero solucionar que las imagenes se me vean en 4:3 en mi slider

[@codeglitch1884]

Puedes usar la propiedad aspect-ratio, o te refieres al número de imágenes?

[@Ivax0081]

No termino de entender como meter mas imágenes, a la que pongo una mas....se desconfiguran las posiciones de las imágenes...alguien me ayuda?

[@codeglitch1884]

Te explico con gusto! Si tienes 4 imagenes que van a mostrarse en 10 segundos, cada una se mostrara de forma igual en ese tiempo., es decir: Imagen 1 = De 0 a 2.5 segundos = 0% - 25% Imagen 1 = De 2.5 a 5 segundos = 25% - 50% Imagen 1 = De 5 a 7.5 segundos = 50% - 75% Imagen 1 = De 7.5 a 10 segundos = 75% - 100% Cada una tiene 1/4 de tiempo asignado en los keyframes, si tu quieres meter por ejemplo 5 imagenes y quieres que cada una dure 4 segundos entonces sera un total de 20 segundos que para que sea igual en cada imagen divides ese 20 entre 5 y te da 20% y haces lo mismo Imagen 1 = De 0 a 4 segundos = 0% - 20% Imagen 1 = De 4 a 8 segundos = 20% - 40% Imagen 1 = De 8 a 12 segundos = 40% - 60% Imagen 1 = De 12 a 16 segundos = 60% - 80% Imagen 1 = De 16 a 20 segundos = 80% - 100% ¿Me explique bien?

[@Ivax0081]

@@codeglitch1884 si perfecto muchas gracias 😊

[@hugo8217]

como puedo hacer para meter un enlace en cada foto?

[@codeglitch1884]

Colocalo en el atributo href="hppts..." solo recuerda colocar todo el protocolo web

[@djninomixxd]

Esto es responsive?

[@codeglitch1884]

No, deberiamos poner media querys para poder ajustar a cada pantalla.

[@SAL73VFX]

@@codeglitch1884 Para hacerlo responsive, asumo que tendríamos que poner en los mediaqueries las imágenes o porcentajes según el "ratio" de la proporción en pantalla en el cual se verá, por ejemplo, si usamos responsive a 768 pixeles, pondríamos la imagen de ancho a 100%, o manejaríamos un tamaño en pixeles menor a 768 pixeles, ¿correcto? Saludos y que se reponga pronto Sr.

[@codeglitch1884]

Lamento la tardanza. En efecto es así, pero ahora puedes utilizar la propiedad aspect-ratio, es bastante util y lo hace responsive

[@lucassansone8351]

@@codeglitch1884 ya que estamos, también tengo una duda. ¿Cómo hacer que desde la ultima imagen vuelva a la primera?

[@rolandogonzalez3839]

Hola bro sabes como extender las imagenes o sea en vez de 4 imagenes sean 7, intente agregar mas pero al momento de ver en la página solo se muestran las primeras 4 que puse y se regresa al inicio, sabes que puedo hacer ahi?

[@codeglitch1884]

Eso es porque el slider está hecho para 4 imágenes, por qué solo tienes un width: 400%; en cada imagen, es decir 100% por imagen, deberían colocar un width: 700%; para que cada imagen valga el 100% y luego en keyframes igual deberás separar dichos poncentajes de tiempo para ajustarlos a tus 7 imágenes

[@rolandogonzalez3839]

@@codeglitch1884 Muchas Gracias lo pude solucionar con tu ayuda, Nuevo sub, mucho éxito

[@codeglitch1884]

@@rolandogonzalez3839 Que gusto saberlo br, gracias crack!

[@dulcemasse7462]

ME FUNCIONO EL SLIDER SOLO QUE , NO ME CARGA LAS DEMAS FOTOS , SOLO LA PRIMERA

[@codeglitch1884]

Checa la ruta que deben tener las imagenes

[@tomashidalgo1303]

Hola,¿cual es la aplicacion que usas en el video?

[@codeglitch1884]

Visual Studio Code

[@claudiaod6028]

mis imagenes nosee centraron tampoco me el slider

[@codeglitch1884]

Quizá sea que no lo colocaste en un DIV, y por eso el margin: 0 auto; no funciona.

[@coriacarolina]

Hola, gracias a los comentarios de acá pude modificar y hacerlo de 8 imágenes el único detalle que me quedó es que al terminar los 4 segundos de la última foto vuelve muy rápido a la primera, alguno tiene idea de cómo puedo solucionarlo?

[@codeglitch1884]

Agrega más tiempo en los segundos que colocas

[@diegogaraviz3440]

Me deja ver solo una imagen, y cuando da la animación me muestra en blanco

[@codeglitch1884]

Revisa con calma el código, quizá haya algo que no ese escrito correctamente, de lo contrario baja el documento

[@christianllumi]

@@codeglitch1884 Tengo el mismo caso.

[@christianllumi]

Me pasa lo mismo, pusé talcual el código y solo se ve la primera imagen, de la segunda hasta la cuarta queda en blanco.

[@codeglitch1884]

DESCARGA EL ARCHIVO AQUI: drive.google.com/drive/folders/1BLo4XAaYISJUnpMiz3S-t4KI5tknmyrT?usp=sharing

[@HkStreamlugo]

me exploto el cerebro

[@alexandermendoza754]

allah aap ko hamesha khush rakhay

[@codeglitch1884]

ek khushee!

[@the_kyo.567vsIori.]

5:52

[@marioNeto2022]

para los que no tenemos mucha idea y partimos de cero, creo que vas muy rápido y cuando llegas a los porcentajes no lo dejas nada claro, en fin, no me enteré de nada.

[@codeglitch1884]

Creo que no lo estás viendo con la calma que de necesita, explico de forma muy clara para que se ocupa el atributo keyframe y el uso de los porcentajes. incluso no tengo comentarios además del tuyo que dicen que no dejo claro los porcentajes Pero por si no queda claro para ti... Los porcentajes se ocupan para desplazar una imagen el 100% de su tamaño es decir la dimensión completa tanto de ancho y alto, eso va directamente proporcional al tamaño del width del contenedor que se explica al inicio Si una imagen tiene el tamaño de 1280 píxeles y multiplicas por 4(imágenes del slider) te da 5120, por lo cual cuando aplicas un porcentaje del 200% cómo se muestra, la imagen se desplaza y ocupa el siguiente espacio 2560% y así sucesivamente hasta cubrir el ancho del contenedor De igual forma es importante decir que un slider no va a ser claro si literalmente estás partiendo de cero como tú lo mencionas ya que los keyframes no suelen ser propiedades que sean comunes para alguien que va de cero, debes tener más experiencia

[@ericcartman7198]

Bien te dicen y pensé lo mismo.. Si partis de cero, este video no es para vos. Simple. No podés pretender encontrar en un video sobre animaciones en css de 8 minutos, una explicacion a ritmo de principiante. Claramente se deberia entender que un video asi es para alguien que ya conoce con un poco mas de ritmo, cómo aplicar atributos, algo de animacion, etc. En 8 minutos no haces un curso. Para eso hay tutoriales de hoooras... El ritmo de este video, para lo que plantea, esta perfecto para el destino de quien lo sabe recibir. Dberías rever vos donde estas, donde buscas, y replantear las pretenciones....

[@euriselias4240]

Mis Imágenes no se centraron ni hace Slider Automático Aiuda 🥺

[@codeglitch1884]

El que debes centrar es el div, ¿estas centrando el div que contiene todo?

[@matubustamante1449]

jajajajaj se me esta zoomeando la imagen en vez de pasar

[@codeglitch1884]

Checa que propiedad estás animando en los keyframes

[@enrichulk9077]

Muy buen tuto pero al revisar el código CSS que proporcionaste anteriormente, noto que el nombre de la animación es diferente en el código CSS y en el código HTML. En el código CSS, la animación se llama slide , mientras que en el código HTML, se llama slider . Asegúraros de que los nombres de la animación coincidan en ambos archivos. Muchas gracias por tu tiempo

[@codeglitch1884]

Si, en este, tuve errores, pero ya tengo videos de este mismo tema actualizado y con css moderno

[@zerteruz]

Cabia el video ! me estaba comiendo el coco hasta que me di cuenta que estaba mal hecho 😟

[@codeglitch1884]

No entiendo tu comentario Bro!

[@zahirdigital]

El autor abandonó sus redes sociales, no las usa desde 2021 :( que mal

[@codeglitch1884]

¿Que autor? Si te refieres a mi, ando vivito, solo pasando etapas de enfermedad algo severas y sin voz, pero ya preparando nuevos videos.

[@vladsnowli7713]

no se desplaza xD haci que mejor descargue el archivo xD

[@jairoyamarte1514]

soy el unico que solo le sale una imagen :C

[@codeglitch1884]

Podrías descargar el archivo y comparar si es que existe algún error en tu código Bro!