SLIDER INFINITO AUTOMATICO únicamente con HTML & CSS desde cero en MENOS DE 7 MINUTOS

Te enseñare a crear un slider automático infinito utilizando únicamente HTML & CSS con tan solo algunas líneas de código.
Si tienes alguna duda deja tus comentarios abajo.
Recursos + Código : Se sube enlace cuando llegue a 20 likes
▼¡SÍGUEME EN MIS REDES!▼
✔TWITTER: / yoshcorona
✔INSTAGRAM: / yoch.sc

[@codeglitch1884]

Descarga el archivo aquí! ⬇ drive.google.com/drive/folders/1O_VXn8wgqs_LYvnwfQkdByHKV06F96yd?usp=sharing

[@gabrielagalvis4775]

Fácil, corto y conciso, muchas gracias por el tutorial 😊

[@codeglitch1884]

Un placer Gabriela!

[@jarlinysnunez7227]

Me salvaste, excelente explicación y rápido, otros videos duran hasta 30 minutos, este me encantó❤

[@codeglitch1884]

Grande 🫡

[@ceciliagonzalez6935]

Gracias por ser tan claro y compartir tus conocimientos! Funciona perfecto!

[@codeglitch1884]

Un placer!

[@asaelsanchez8223]

Muchas gracias despues de varios videos con la misma tematica fuiste el que me dio el resultado que esperada. Exito!

[@codeglitch1884]

Grande bro! 🙏

[@josejaum]

Excelente tutorial, me sirvió mucho!! Ya andaba pensando como hacerlo con Javascript o librerías cuando existe esta manera mas sencilla y optima, gracias :)

[@codeglitch1884]

Un placer bro! 🤜🏻🤛🏻

[@GtAbimael]

todo un crack, lo úncio que modifiqué fue que todos los logos me los convierta a escala de grises, 80 segundos de duración y un espacio de 20px, de ahí quedo perfecto, muchas gracias.

[@codeglitch1884]

Grande bro!

[@FreddySenpai]

MUCHAS! Muchas gracias.. estuve peleando con esto bastante tiempo y no encontraba como hacerlo

[@codeglitch1884]

Un placer bro!

[@simoncastano_]

gracias, amigo que crack me ayudaste mucho Fácil, corto y conciso que agradable sujeto

[@codeglitch1884]

Facilito!

[@mauriciosoria5091]

Me remil salvaste hermano, super Like!!!

[@codeglitch1884]

Grande Bro!

[@dambedev]

Genial! Gracias por compartir

[@codeglitch1884]

🙌

[@alexandromoroz8195]

te amo hermano, llevo buscando esto 3 días

[@codeglitch1884]

Lo has encontrado broo ❤️

[@alexandromoroz8195]

@@codeglitch1884 lo que sí busqué y no logré encontrar es la manera de hacer que cuando el usuario tiene el cursor encima, pueda clickearlo y deslizar hacia la izquierda o derecha y dependiendo la intensidad, se mueve más o menos, seguro conoces de qué hablo, te juro que busqué y busqué pero no lo encontré, igual estoy super satisfecho con el resultado, gracias por el pedazo de video :)

[@neiderfabianortizluna3503]

Exelente, buena explicación. Podrías hace uno con texto Lorem que sea infinito

[@codeglitch1884]

¡Suena interesante! Si claro que si lo hare.

[@renat0tintaya21]

Que crack me ayudó mucho este tutorial 🎉🎉🎉🎉

[@codeglitch1884]

Un gusto crack!

[@duridev]

Muchas gracias!!

[@aborges8851]

Fino hermano me sirvio...!!!

[@codeglitch1884]

🤝

[@nooob922]

Genial hombre gracias.

[@codeglitch1884]

Grande bro 🤘🤘

[@luisenriquedelapenamolero2534]

Gracias amigo, me sirvió de mucho.

[@codeglitch1884]

Que gusto que te sirva Luis!

[@williamcampbell4046]

Está genial amigo, muy bien explicado muchas gracias. Sin embargo en mi caso en la parte inferior de las imágenes me aparece una barra de desplazamiento horizontal que es innecesaria y además malogra el diseño deseado. Alguna idea de por qué haya pasado esto amigo ? Muchas gracias de antemano y nuevamente Felicitaciones por el video, muy útil :)

[@luisangelmasfil5084]

quizas te falta este codigo en el contenedor overflow: hidden; en el mismo video te explica

[@codeglitch1884]

Si quizá sea el overflow, ya pudiste solucionarlo?

[@lucianoazalot4138]

Excelente video

[@adolforamirezdesancristoba3745]

Muchas gracias bro, muy buen video.

[@luiscordovaolavarria9153]

ERES EL MEJOR NADIE COMO TU

[@codeglitch1884]

Gracias crack!

[@noramorgan7363]

Muchas gracias por este video!

[@MetaWar.]

Genio maaaaaaaaaaaaaaaaal!! gracias bro!

[@codeglitch1884]

Gracias crack!

[@roggerchavez7166]

Que tal estimado, muy bueno el tutorial, muchas gracias. Mi pregunta es como pauso el slider al poner el mouse encima de algún logo?

[@codeglitch1884]

Es un tanto diferente! Pero ya estoy preparando un vídeo de ello!

[@carlosdanielerazo1794]

paso ya un tiempo pero puede ser que a alguien le sirva, ponle una pseudoclass que se llama hover al div que contiene las imagenes. le vas a poner este elemento transition: animation-play-state 1s ease-in-out;

[@gabrieltorrez1568]

Muy bueno! y rapidisimo , hay alguna forma de que no corte o nose note tanto el corte cuando vuelve a empezar ?

[@codeglitch1884]

Cuántas imágenes está utilizando?

[@gabrieltorrez1568]

​@@codeglitch1884 Hola! hice las mismas proporciones que en el video pero para 5 imágenes

[@codeglitch1884]

@@gabrieltorrez1568 usa lo mismo para completar el ciclo en total 10 div, el doble de imagenes, y ahora ve probando valores diferentes en el margin, no siempre funciona igual porque debes adaptarlo al número de imagenes, me ¿entiendes?

Muy buen video!! Bien explicado y rápido. Solo tengo una duda, si quiero que el movimiento vaya más rápido cómo debería hacer?

[@codeglitch1884]

En el atributo animation colocas la duración deseada por ejemplo 10s, 20s, 30s, ¿me entiendes?

[@josmarpena396]

Hola buenas noches hermano exelente video que Dios te siga dando esa sabiduría hermano y una pregunta cómo haría para que en vez de estar arriba ese slaider este abajo hermano

[@codeglitch1884]

Perdona la demora hermano, si te das cuenta ocupe un width para que sea en el eje X, si quiere vertical en vez de width deberías ocupar height para que así sea a lo alto!

[@josmarpena396]

@@codeglitch1884 cómo así hermano no entendí muy bien ya que soy nuevo en lo de la programación me podrías ayudar con eso hermano para hacerlo en el código o que debería hacer o poner bro

[@rafaellang9]

Muito obrigado pelo video, ajudou muito. Abraços hermano

[@codeglitch1884]

Obrigado!

[@PabloAndresPenagosAlvarez]

Muchísimas gracias bro me fue de gran ayuda 😅

[@codeglitch1884]

Eso Bro! 🤝

[@MiguelAngel-pu8vv]

Hola, fue un muy buen video pero tengo una duda, ¿como puedo ponerle un espacio entre cada imagen?, espero tu respuestan :D

[@codeglitch1884]

Disculpa la demora, puedes agregar margin en su valor left y right, ese valor te ayudará a dar espacio!

[@gabrieltorrez1568]

@@codeglitch1884 Hola yo le agregue en .slider .slide-track {gap: 50px} ,al tener display flex se puede aplicar :)

[@Redpurple-x1v]

El sonido de Roblox al colocar los slide 🤣🤣🤣🤣🤣

[@codeglitch1884]

Es el bueno jajajaja

[@pedroriveralopez8566]

Amigo utilicé el keyframe tal cual pusiste en Sass pero no se mueven mis imagenes

[@David-ask]

me salio !!! gracias

[@codeglitch1884]

Eso Bro!

[@AlfonsoLi]

Saludos cordiales .. excelente

[@codeglitch1884]

Saludos Bro!

[@publimagenperu]

GRACIAS MUY BUENO

[@codeglitch1884]

🙌

[@santiagodominguez3605]

Genio total

[@carolinavitale6933]

Top! 🔝

[@mariateresaarboleda5565]

Buenazo

[@codeglitch1884]

🙏

[@Anonymous-zw5oq]

Te ganaste mi suscripción

[@codeglitch1884]

Grande bro! 🤘

[@stormfox2043]

me encanto eh me ayudaste buenisimo puedes hacer uno de 3d?

[@codeglitch1884]

Claro que si, activa campanita para estar al tanto!

[@enriqueestrada9224]

EXCELENTE VÍDEO BRO SI SE PUEDE UN TUTORIAL DE UN SLIDER MANUAL SOLO CON CSS Y HTML

[@codeglitch1884]

Tengo varios en el canal amigo :D

[@jcrr682]

Hola, quería saber cómo puedo hacer que el slider vaya de forma vertical? Lo quería poner en los bordes de mí página

[@miguelherrera8614]

Una pregunta. A cada imagen se le puede agregar un link?

[@codeglitch1884]

Si bro! Puedes agregar un enlace a cada imagen!

[@Witcher_n]

Pero se repiten por que duplicaste las imagenes, cuando llega al final se corta y comienza de nuevo.🤔

[@luisenriquecaleroanchelia6369]

Así es , cuando llega a la mitad se regresa , y como se duplicó 1 vez , no se ve ese salto😊

[@codeglitch1884]

Con CSS se tiene limitaciones y se tiene que usar “trucos” para poder darle el efecto deseado

[@GabrielitoSoy]

Se puede poner un enlace en cada imagen?. lo bajé y lo personalicé, pero me interesa el punto de agregar un enlace. Gracias.

[@jrjuanramos815]

si, le agregas un a para link

[@SauloCid]

Tengo un inconveniente porque ya traté de hacerlo de esa manera y no resuelvo que: la animación no se corte. No hay una manera de NO colocarle un tiempo, ya que es infinito, y que el slide no deje de recorrer? porque sino hay que duplicar las imagenes una y otra vez y no es conveniente la repeticion de codigo.

[@luisenriquecaleroanchelia6369]

El tiempo de animación ya es infinito , así que si quieres q vaya ma rápido solo bajarle el tiempo y solo se debe duplicar los elementos 1 sola vez , la idea es que cuando el Slider llege a la mitad, regrese a cero y como la otra mitad es duplicada no se verá ese salto 😊 De hecho la duplicación debe hacerse con javascript para q sea dinamico

[@codeglitch1884]

Igual puedes intentar otro tipo de animación como alternate o reverse y probar esos resultados

[@ado0god]

Holaaa, podrías hacer un video tutorial de como hacer una página tipo de csgo osea, entras a una pagina de csgo donde abris cajas, y ves que tiene la animación de girar de forma horizontal ? xD no sé si me explique JAJA y hacer que quede en medio el objeto que haya quedado ?:P

[@codeglitch1884]

No bro, no entendi, pegame un enlace con algo similar hermano y ya lo veo!

[@ado0god]

@@codeglitch1884 dale hermano 😺

[@ado0god]

@@codeglitch1884 aquí está un ejemplo, si podrías hacer igualito es decir como los cuadros, y la animación que gire en carrusel horizontal, y la velocidad inicial empiece lento y conforme avance aumente al igual como cuando vaya finalizando baje su velocidad XD no se si me explique JAJA pero en el video es como te digo:P

[@ado0god]

@@codeglitch1884 kzbin.info/www/bejne/apjaiWaijJuSatU

[@dannymathews816]

Rxcelete video! muy bien explicado, el slider funciona excelente en Microsoft edge, que es el que esta como navegador en el VSC, pero si lo abro en Chrome, Opera, y Firefox NO SE VE NADA, y le coloque el -wekittransform: translate. como lo puedo arreglar?

[@codeglitch1884]

aplica el mismo prefijo para los valores, animation y keyframes, mientras mas pase el tiempo sera más facil que los navegadores permitan utilizar dichas caracteristicas sin prefijos, pero de momento agregalos en esos parametros

[@user-tt1is2xm2o]

Una pregunta...se puede hacer lo mismo pero en vez de imagenes poner cartas?? y sin javascript??

[@codeglitch1884]

Que las imagenes sean cartas? A eso te refieres?

[@user-tt1is2xm2o]

exacto !!@@codeglitch1884

[@divisiona-u6c]

pero el html se repite dos veces, y cuando lo colocamos en un crud, ocasionamos que la información se haga 2 veces la peticion gastando recurso. habrá alguna forma de que el html no tengamos que repetirlo?

[@codeglitch1884]

Con css nativo es complicado, de hecho con repetir algunos imágenes es un "truco" para conseguir esos efectos, si no se desea repetir código debería ser con preprocesadores.

[@luisenriquecaleroanchelia6369]

Puedes clonarlo con javascript , pero la lógica es q sea duplicado y mover el Slider el 50% y luego q regrese a cero y así infinitamente Si solo lo haces con 4 imágenes , al moverlas se verán los huecos 😊

[@josepalomo3980]

similar pero con fotos? que ocupen toda la pantalla y muestre cada foto? con fotos a 1080p al menos 10 es posible? lo intente pero despues de 5 me las manda al renglon de abajo y no se ven al ejecutarse

[@CodeMusic123]

solo as que el contenedor ocupe el alto de la pantalla osea h-screen, y ya a las imagenes les pones un height 100% y lo mismo pero con el hancho, el proceso despues de eso es el mismo

[@270LP]

Hola, está genial el slide bro, pero cómo hago para que el sentido del slider sea para el otro lado, intenté cambiando los keyframes y avanza para el otro lado pero se acaban los logos y se queda en blanco hasta que se vuelva a repetir la animación. Me gustaría lo mismo pero en sentido contrario, gracias :)

[@luisenriquecaleroanchelia6369]

Solo usa Reverse en la línea de animation de css y listo 😊

[@270LP]

@@luisenriquecaleroanchelia6369 en qué parte sería? como un atributo de animation o como una línea de código diferente? y estuve haciendo este carrusel pero con 19 fotos y no logro hacer que el bucle sea correcto como cuándo el ejemplo era de 7 imagenes.

[@luisenriquecaleroanchelia6369]

@@270LP en la misma línea de la animación. en el vídeo hace algunos cálculos que se solucionaría con max content en el width del carrusel.

[@codeglitch1884]

En la animación cambié el estilo a reverse 🤜🏻🤛🏻

[@israelparra2722]

Hola amigo, hice lo mismo pero con 3 imagenes, y lo que pasa es que ya cuando se acaban los seg de la animación, sigue corriendo el slider y como corre hacia la izquierda, deja la mitad del campo del slider que osn los 75vw con imagenes y la otra con el color del fondo que tiene tu body, entonces mi pregunta es, como le hago para que el slider sea infinito y nomas corra hacia la izquierda y nunca dejen de aparecer las imagenes?, con 7 que tu pusiste si se puede, ppero con 3 pasa eso que te digo

[@codeglitch1884]

Eso se debe a que como tal yo coloco esos valores dependiendo de las imagenes que utilices, si son menos, evidentemente te va a quedar más espacio libre y sera complicado que con tres imagenes se vea en el width que asigne, intenta cambiando el width que sea más pequeño para asi tener menos espacio y no quede un hueco!

[@David-ask]

buenas en vez de poner cada imagen en un div , si pongo todas en un div solo como el slider manual servira igual ??

[@codeglitch1884]

No, ya que al añadir padding para un elementos no te dará el mismo resultado que para varios elementos!

[@elcarbon]

esta tremendo en desktop, pero en mobile no me funciona, tenes idea de porque?

[@codeglitch1884]

Duele ser complicado porque css tiene limitaciones, pero en estos días subiré la versión responsive y ese si funcionará en todas las pantallas

[@michaelquenguan2957]

hola, una pregunta, hago todo , pero la ultima foto llega al lado izquierdo, de ahi queda en blanco hasta que empieza de nuevo, como hago para que quede infinito, es decir que se repita desde la primer foto cuando llegue a la ultima, para que no quede ese lapso de tiempo en blanco?

[@codeglitch1884]

Tienes el número de imágenes por el tiempo: ejemplo 4 imágenes y 3 seg por imagen: 12 total

[@FrostZank]

@@codeglitch1884 Hola, no se si leeras esto, me podrías explicar esto?

[@aborges8851]

Buenas tardes hermano, muy bueno el video tutorial pero yo estoy haciendo un bocle while y no se cuantas img hay en la base de datos y tu lo estas haciendo con calc(200px * 14) como hacemos =??? por que tengo super mas de 14 img

[@codeglitch1884]

Se coloca el doble de imágenes para generar ese efecto, a eso te refieres?

[@felix7575]

Hola! ¡Muchas gracias! ¿Cómo puedo añadirlo a mi wordpress cuando ya tengo el index.php y el style.css? ¡Gracias!

[@codeglitch1884]

solo copia el codigo que necesitas, no todo el archivo e incluyelo en el editor!

[@Marco-bd5eh]

bro la animación se reproduce bien pero al llegar al final del slider-track esta no es continua y aparece un gap sin logos hasta que la animación se repite de nuevo, como puedo arreglarlo?

[@codeglitch1884]

Usaste el mismo número de logos? Porque dependiendo el número de logos y el espacio entre ellos puede afectar un poco

[@Marco-bd5eh]

@@codeglitch1884 ya lo arreglé, se me olvidó copiar y pegar los logos en el html

[@bzr1200]

Bro, si me sirvió, muchas gracias, pero tengo un menú en poisition fixed y el slide lo atraviesa, a parte el div q me sigue abajo queda muuuy lejos del slide

[@luisenriquecaleroanchelia6369]

Dale un margin top al body y así se soluciona lo del position fixed

[@codeglitch1884]

Si exacto agrégame un margin top para liberar ese espacio

[@alvaroortizmartin-palanco3995]

buenas, llego un poco tarde pero bueno, la duda es como hago para bajar el slider al final de la sección, porque intento con un padding-top al 100% y tampoco funciona, gracias

[@codeglitch1884]

Podrías utilizar un contenedor con 100vw y 100vh, agregar un display flex y luego centrar con justify-content: center; y luego con align-items: flex-end; y con eso sería suficiente!

[@alexandraSantaM]

hola muchas gracias por el video, tenia una duda, como puedo hacer para que una vez termine de mostrar las imagenes vuelva a empezar a cargarlas, a mi me aparece solo las imagenes hasta el final de las que tengo y la unica forma que aparecen todas nuevamente es cuando recargo la pagina, de lo contrario no aparece nada

[@codeglitch1884]

cuantas imagenes estas usando?

[@alexandraSantaM]

@@codeglitch1884 pues inicialmente son 8

[@espejolui]

De igual forma hay un corte pasados los 40s, ¿Alguien sabe como quitarlo para no tener ese inconveniente?

[@codeglitch1884]

Que tipo de corte?

[@HkStreamlugo]

logre crear el slider pero no logro hacer que las imagenes se pongan una al lado de la otra , algun detalle del error

[@codeglitch1884]

¿Los metiste dentro de un contenedor?

[@luisenriquecaleroanchelia6369]

Display flex

[@unargentinoquepiensa7428]

Bro enseña como hacer una timeline

[@codeglitch1884]

Cómo el de fb o como?

[@unargentinoquepiensa7428]

@@codeglitch1884 kzbin.info/www/bejne/qmakdmlsjMyEepI algo as centrandote en el circulo y la linea

[@codeglitch1884]

@@unargentinoquepiensa7428 Ok bro, puedo intentar algo así!

[@HkStreamlugo]

segui tus pasos , al pide la latra pero en el navegador no me aparecen las imagenes ,ayuda :( por favor

[@codeglitch1884]

Pudiste hacerlo?

[@HkStreamlugo]

Si Broder aún tengo algunos problemas , pero ya lo logré , solo es práctica para lograrlo a la perfección , agradecido !

[@mairaquintili987]

hola, en caso de que quiera que el slider se vea a la mitad de la pagina y no arriba como puedo hacer? Por cierto muy buen video

[@codeglitch1884]

tienes que asignar un contenedor para el slider que ocupe 100% de alto y ancho y luego centrar por ejemplo con flexbox con un justifu-content:"center"; y align-items:"center";

[@andressantiagosotelobohorq2080]

Hola amigo muy bueno el video , pero como hago para que en vez de que sean imágenes sea un texto

[@codeglitch1884]

Solo colocas párrafos en lugar de imágenes en la etiquetas en HTML

[@danielcortes9948]

Hola buen video, sin embargo cuando se acaban los logos se reinica la animación y vuelve a empezar de golpe. como podría hacer para que fuera infinito?

[@codeglitch1884]

Cambia el tipo de animation a infinite!

[@josexp7957]

Bro, yo lo medio resolví pero añadiendo a infinite la sentencia alternate para que la animación se devuelva para atras y en el keyframe baje el segundo valor de multiplicación para ir eliminando el espacio que me sobraba al terminar la animación. Por lo menos asi no se nota que vuelve a empezar de golpe.

[@WORLDARMYMENRTS]

Todo esto te puedes ahorra utilizando el elemento marquee y ya xd

[@codeglitch1884]

Si, es otra buena opción

[@luisenriquecaleroanchelia6369]

Ese elemento está más descontinuado xdxdxd😂😂

[@roman-xo6cs]

que puedo hacer si estan con diferente tamaño mis imagenes? seria de gran ayuda tu respuesta

[@codeglitch1884]

Solo adapata el mismo tamano que tu quieras en cada imagen en un editor si es posible, todas las imagenes que utilice en este video tiene un width de 400px que es lo mismo que utilice en el video, eso te ayudará mucho a evitar problemas con el tamaño en css.

[@luisenriquecaleroanchelia6369]

Puedes usar porcentajes y object-fit cover para q no se estiren las imágenes 😊

[@gonper352]

si tengo 11 imagenes, que porcentaje debo usar?

[@codeglitch1884]

Solo debes dividir el tiempo total entre el número de imágenes. Por ejemplo: Si tienes 4 imágenes y se animaran en 10 segundos, debes dividir 100% (que representan los 10 segundos) entre el número de imágenes que tengas en este caso 4, y te queda (100/4 =25) y ese 25 significa que es el 25% del los 10 segundos es decir 2.5 segundos. Y si tienes 5 imágenes seria (100/5 = 20). ¿Me explico?

[@noramorgan7363]

@@codeglitch1884 Sos impecable explicando. Qué maravilla. Y yo que sigo sin resolver el corte: pasan las 7 imágenes y queda todo un ciclo vacío y vuelve a arrancar de golpe... Mil gracias por compartir tu conocimiento.

[@arielfuentes3775]

se puede hacer en vertical?

[@codeglitch1884]

Tengo uno en vertical

[@arielfuentes3775]

@@codeglitch1884 puedes pasarme el video para analizar el código y entender como lo haces?

[@katlesty]

Como puedo hacer para que el slider sea en vertical?

[@codeglitch1884]

Pronto subiré un vídeo sobre ello

[@Csp88]

hola tengo una duda

[@codeglitch1884]

Cual es tu duda?

[@LaTerrazaCafe]

ayudaaaaa necesito hacer uno de solo letras, por favor

[@codeglitch1884]

Horizontal o vertical? Porque vertical tengo uno

[@xXkeissiusXx]

Como puedo hacer lo mismo pero vertical ?

[@codeglitch1884]

Probare y espero subir un video pronto!

[@lolitoramirezgomez6448]

puedes compartir el codigo? plss

[@codeglitch1884]

Ya esta listo el archivo en un comentario fijado!

[@victorroman2416]

mas de 20 like y el codigo no esta xD, si puedes subir el codigo bien, gracias igualmente

[@codeglitch1884]

Ya esta listo el archivo en un comentario fijado!

[@victorroman2416]

@@codeglitch1884 gracias crack