SLIDER CON BOTONES desde cero con CSS3 y HTML5 TOTALMENTE RESPONSIVE en tan SOLO 7 minutos!
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- A los 50 likes dejare el proyecto para que lo descarguen.
Crea este Slider con botones utilizando HTML y CSS3 utilizando recursos modernos de CSS que harán mas optimo y responsive el slider.
00:00 Intro
00:05 Recursos para crear el Slider
00:32 HTML del Slider
01:59 CSS del Slider
06:45 Resultado
- Recursos:
- scroll-snap-type: developer.mozilla.org/en-US/d...
- flex: developer.mozilla.org/es/docs...
- aspect-ratio: developer.mozilla.org/en-US/d... - วิทยาศาสตร์และเทคโนโลยี
Que genialidad!!! me encantó
Grande bro!
exelente video hermano yo que estoy aprendiendo css, ya aprendi html y ver tu video me va de maravilla
Un gusto que te sea útil Alan!
Excelente video
Gracias crack!
Grande
Gracias crack!
buenas me ha servido , el de automatico esta bueno , gracias
Un gusto crack!
Mi hermano buen video, pero podrías hacer un video con el slider automático y agregar los flechas para cambiar también? ósea completo, con los botones, automático, y las flechas. SALUDOS¡¡
Por supuesto!
Grabaré algunos vídeos de varias formas de crear un slider, así que mantente atento que pronto subiré ese vídeo!
@@codeglitch1884 como puedo contactarte, quiero que me ayudes con u pequeño proyecto de slider, se podría?
genial video, tendras uno con texto y Botones con sus links ?
¿Como?
Gracias por el video, me pasa que cuando trato de poner las imágenes con menor tamaño, los botones me quedan abajo
Debes trabajar conforme a las medidas de tus imágenes, es recomendable siempre trabajar con imágenes de una resolución muy similar por ejemplo HD (1080 x 720)
Como se le puede añadir el automático a esto? he estado intentando con tus otros videos pero solo añadiendo el keyframe y se rompe, o para tener automatico y botones hay que hacer todo desde 0?
Si, funciona un tanto diferente, pero haré otro dónde sean ambas funciones juntas
Disculpa tuve un problema con un antiguo video de slider infinito, en el cual los divs o los sliders no vuelven a salir del lado derecho si no, se repite desde el lugar inicial. ¿Qué podría ser? Use 4 img o items
PD: Sos un genio
Con css debes tener cuidado ya que el número de imágenes e incluso el tamaño deben tener una relación e ir configurando el tamaño de las imágenes y espacios entre ellas según el número de imágenes, ¿se entiende?
@CodeGlitch y este mismo asi como está ¿como o puedo hacer que sea automtico?
Tendrías que establecer keyframes cada que quieres que un elemento del slider se mueva, te recomiendo ver mi video de como hacer un slider automático y ahí entenderás más fácil lo de los keyframes!
deja el codigo que aunque mire varias veces no me sale como a ti te sale, por favor sería mejor.
o no lo das para que tengas más reproducciones?
No veo el porque hacer eso!
Lo pondré el lunes sin falta amigo!
Ya que estoy desde el teléfono y no puedo ahora, pero el lunes lo tiene sin falta!
Como puedo hacer para que avance el slider automaticamente?
Tengo otros videos donde el slider es automático!
En mi caso lo puse en practica pero me da problemas que se pasa a la parte de abajo del slider cuando presiono los botones
Por lo demas todo bien y muy didactico
Creo que debo de revisar mi archivo .js
No debería suceder eso, ¿haz revisado bien que alguna regla en css o algo en tu Html este todo bien?
@@codeglitch1884 Al final lo hice por aparte y lo inclui en mi html principal con la etiqueta
Pero me fue de mucha ayuda, ya no me recordaba como hacer un slider
Quedo asi:
bro, tengo un fallo, cuando le doy a uno de la slider-nav la pantalla se desplaza hacia arriba
yo tmb tengo ese fallo, lo has podido solucionar ?
Esta el código dentro de la descripción, tómalo y compara, seguro alguna propiedad se habrá pasado, o algo, intentalo!
Hola, copie tu codigo exactamente, porque estoy aprendiendo, pero no me funciona nada. Que podra ser ?? Gracias.
Estás usando el mismo navegador que yo(Chrome) ya que algunos navegadores más viejos como puede ser explorer tienen poca compatibilidad con algunas etiquetas de css.
También puedes descargar los recursos y comparar con tu código!
@@codeglitch1884 Si, disculpa la tardanza, no vi la respuesta. Uso Chrome. No volvi a probar, cuando el trabajo me deje tiempo, lo hare. Gracias.
@@yohamter4691 Pruebalo, yo creo que eso te ayudara
En un slider cada foto es un slide. A buen entendedor pocas palabras...
"Slide" significa deslizar, y si te das cuenta cuando das clic en un botón la imagen DESLIZA
A buen entendedor pocos ejemplos...
@@codeglitch1884 No te calentés. Le ponés slider-1, 2... a las fotos y esas son slides. Las fotos son slides y slider es el que muestra fotos. Soy C2 en Cambridge y viví 10 años en un país de habla inglesa si comento es porque se, no por hacer problemas. Saludos y tu tutorial está muy bueno. Gracias por compartir.