SLIDER INFINITO AUTOMATICO únicamente con HTML & CSS desde cero en MENOS DE 7 MINUTOS
ฝัง
- เผยแพร่เมื่อ 4 พ.ค. 2022
- 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 - วิทยาศาสตร์และเทคโนโลยี
![CAMPปลิ้น | EP.77[2/2] "รับทราบ" แก๊งเพื่อนรัก 10 ปี ที่ไปไหนก็มีตำนาน!](http://i.ytimg.com/vi/ifc0ofD51B0/mqdefault.jpg)
![[안방1열 직캠4K] 베이비몬스터 치키타 'FOREVER' (BABYMONSTER CHIQUITA FanCam) @SBS Inkigayo 2404707](http://i.ytimg.com/vi/Tn3bGHiBWkg/mqdefault.jpg)
Descarga el archivo aquí! ⬇
drive.google.com/drive/folders/1O_VXn8wgqs_LYvnwfQkdByHKV06F96yd?usp=sharing
Fácil, corto y conciso, muchas gracias por el tutorial 😊
Un placer Gabriela!
Me salvaste, excelente explicación y rápido, otros videos duran hasta 30 minutos, este me encantó❤
Grande 🫡
Gracias por ser tan claro y compartir tus conocimientos! Funciona perfecto!
Un placer!
Muchas gracias despues de varios videos con la misma tematica fuiste el que me dio el resultado que esperada. Exito!
Grande bro! 🙏
gracias, amigo que crack
me ayudaste mucho
Fácil, corto y conciso que agradable sujeto
Facilito!
MUCHAS! Muchas gracias.. estuve peleando con esto bastante tiempo y no encontraba como hacerlo
Un placer bro!
Excelente tutorial, me sirvió mucho!! Ya andaba pensando como hacerlo con Javascript o librerías cuando existe esta manera mas sencilla y optima, gracias :)
Un placer bro! 🤜🏻🤛🏻
Muchas gracias bro, muy buen video.
Muchas gracias por este video!
Me remil salvaste hermano, super Like!!!
Grande Bro!
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.
Grande bro!
Genial! Gracias por compartir
🙌
te amo hermano, llevo buscando esto 3 días
Lo has encontrado broo ❤️
@@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 :)
ERES EL MEJOR NADIE COMO TU
Gracias crack!
Gracias amigo, me sirvió de mucho.
Que gusto que te sirva Luis!
Fino hermano me sirvio...!!!
🤝
Genio maaaaaaaaaaaaaaaaal!! gracias bro!
Gracias crack!
Que crack me ayudó mucho este tutorial 🎉🎉🎉🎉
Un gusto crack!
Genial hombre gracias.
Grande bro 🤘🤘
Muchísimas gracias bro me fue de gran ayuda 😅
Eso Bro! 🤝
Exelente, buena explicación. Podrías hace uno con texto Lorem que sea infinito
¡Suena interesante! Si claro que si lo hare.
Excelente video
Top! 🔝
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?
En el atributo animation colocas la duración deseada por ejemplo 10s, 20s, 30s, ¿me entiendes?
Genio total
Saludos cordiales .. excelente
Saludos Bro!
Buenazo
🙏
Muito obrigado pelo video, ajudou muito. Abraços hermano
Obrigado!
Te ganaste mi suscripción
Grande bro! 🤘
GRACIAS MUY BUENO
🙌
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?
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
me salio !!! gracias
Eso Bro!
me encanto eh me ayudaste buenisimo puedes hacer uno de 3d?
Claro que si, activa campanita para estar al tanto!
EXCELENTE VÍDEO BRO SI SE PUEDE UN TUTORIAL DE UN SLIDER MANUAL SOLO CON CSS Y HTML
Tengo varios en el canal amigo :D
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?
Es un tanto diferente!
Pero ya estoy preparando un vídeo de ello!
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;
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
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!
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 :)
quizas te falta este codigo en el contenedor overflow: hidden; en el mismo video te explica
Si quizá sea el overflow, ya pudiste solucionarlo?
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
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!
@@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
Muy bueno! y rapidisimo , hay alguna forma de que no corte o nose note tanto el corte cuando vuelve a empezar ?
Cuántas imágenes está utilizando?
@@codeglitch1884 Hola! hice las mismas proporciones que en el video pero para 5 imágenes
@@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?
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
Se coloca el doble de imágenes para generar ese efecto, a eso te refieres?
buenas en vez de poner cada imagen en un div , si pongo todas en un div solo como el slider manual servira igual ??
No, ya que al añadir padding para un elementos no te dará el mismo resultado que para varios elementos!
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
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
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?
Tienes el número de imágenes por el tiempo: ejemplo 4 imágenes y 3 seg por imagen: 12 total
@@codeglitch1884 Hola, no se si leeras esto, me podrías explicar esto?
Se puede poner un enlace en cada imagen?. lo bajé y lo personalicé, pero me interesa el punto de agregar un enlace. Gracias.
si, le agregas un a para link
Una pregunta...se puede hacer lo mismo pero en vez de imagenes poner cartas?? y sin javascript??
Que las imagenes sean cartas? A eso te refieres?
exacto !!@@codeglitch1884
Hola! ¡Muchas gracias! ¿Cómo puedo añadirlo a mi wordpress cuando ya tengo el index.php y el style.css? ¡Gracias!
solo copia el codigo que necesitas, no todo el archivo e incluyelo en el editor!
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
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!
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?
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.
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 😊
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.
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
Igual puedes intentar otro tipo de animación como alternate o reverse y probar esos resultados
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
Dale un margin top al body y así se soluciona lo del position fixed
Si exacto agrégame un margin top para liberar ese espacio
Una pregunta. A cada imagen se le puede agregar un link?
Si bro!
Puedes agregar un enlace a cada imagen!
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
cuantas imagenes estas usando?
@@codeglitch1884 pues inicialmente son 8
Hola, fue un muy buen video pero tengo una duda, ¿como puedo ponerle un espacio entre cada imagen?, espero tu respuestan :D
Disculpa la demora, puedes agregar margin en su valor left y right, ese valor te ayudará a dar espacio!
@@codeglitch1884 Hola yo le agregue en .slider .slide-track {gap: 50px} ,al tener display flex se puede aplicar :)
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?
Usaste el mismo número de logos? Porque dependiendo el número de logos y el espacio entre ellos puede afectar un poco
@@codeglitch1884 ya lo arreglé, se me olvidó copiar y pegar los logos en el html
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
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";
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 :)
Solo usa Reverse en la línea de animation de css y listo 😊
@@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.
@@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.
En la animación cambié el estilo a reverse 🤜🏻🤛🏻
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?
Cambia el tipo de animation a infinite!
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.
Pero se repiten por que duplicaste las imagenes, cuando llega al final se corta y comienza de nuevo.🤔
Así es , cuando llega a la mitad se regresa , y como se duplicó 1 vez , no se ve ese salto😊
Con CSS se tiene limitaciones y se tiene que usar “trucos” para poder darle el efecto deseado
que puedo hacer si estan con diferente tamaño mis imagenes? seria de gran ayuda tu respuesta
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.
Puedes usar porcentajes y object-fit cover para q no se estiren las imágenes 😊
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
No bro, no entendi, pegame un enlace con algo similar hermano y ya lo veo!
@@codeglitch1884 dale hermano 😺
@@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
@@codeglitch1884 th-cam.com/video/4gwX3lW6_4s/w-d-xo.html
De igual forma hay un corte pasados los 40s, ¿Alguien sabe como quitarlo para no tener ese inconveniente?
Que tipo de corte?
segui tus pasos , al pide la latra pero en el navegador no me aparecen las imagenes ,ayuda :( por favor
Pudiste hacerlo?
Si Broder aún tengo algunos problemas , pero ya lo logré , solo es práctica para lograrlo a la perfección , agradecido !
logre crear el slider pero no logro hacer que las imagenes se pongan una al lado de la otra , algun detalle del error
¿Los metiste dentro de un contenedor?
Display flex
Hola amigo muy bueno el video , pero como hago para que en vez de que sean imágenes sea un texto
Solo colocas párrafos en lugar de imágenes en la etiquetas en HTML
esta tremendo en desktop, pero en mobile no me funciona, tenes idea de porque?
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
El sonido de Roblox al colocar los slide 🤣🤣🤣🤣🤣
Es el bueno jajajaja
Como puedo hacer para que el slider sea en vertical?
Pronto subiré un vídeo sobre ello
si tengo 11 imagenes, que porcentaje debo usar?
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?
@@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.
Como puedo hacer lo mismo pero vertical ?
Probare y espero subir un video pronto!
se puede hacer en vertical?
Tengo uno en vertical
@@codeglitch1884 puedes pasarme el video para analizar el código y entender como lo haces?
Bro enseña como hacer una timeline
Cómo el de fb o como?
@@codeglitch1884 th-cam.com/video/t5AE66WgQD0/w-d-xo.html algo as centrandote en el circulo y la linea
@@unargentinoquepiensa7428 Ok bro, puedo intentar algo así!
hola tengo una duda
Cual es tu duda?
puedes compartir el codigo? plss
Ya esta listo el archivo en un comentario fijado!
ayudaaaaa necesito hacer uno de solo letras, por favor
Horizontal o vertical? Porque vertical tengo uno
Todo esto te puedes ahorra utilizando el elemento marquee y ya xd
Si, es otra buena opción
Ese elemento está más descontinuado xdxdxd😂😂
mas de 20 like y el codigo no esta xD, si puedes subir el codigo bien, gracias igualmente
Ya esta listo el archivo en un comentario fijado!
@@codeglitch1884 gracias crack