COMO HACER un SLIDER AUTÓMATICO con HTML & CSS en SOLO 4 MINUTOS | De 0 al 100% | NIVEL SUPER EASY!
ฝัง
- เผยแพร่เมื่อ 14 พ.ค. 2022
- Este slider automático es uno de las mas sencillos ya que solo necesitaremos de dos etiquetas en HTML y algo de estilos.
▼¡SÍGUEME EN MIS REDES!▼
✔TWITTER: / yoshcorona
✔INSTAGRAM: / yoch.sc - วิทยาศาสตร์และเทคโนโลยี
MUCHAS GRACIAS POR LAS CLASES, ESTUBO MUY BUENO. SUERTE :)
excelente hermano no sabes de la q me salvaste. quería hacer un slider pero los tutoriales q seguía afectaban mucho a mi barra de menú, el tuyo es el único q me sirvió gracias bro
Que bueno hermano, este no te afecta a nada ya que está en un bloque por separado de los demás
Buenas, prestando si veo las imagenes pero tienen una altura infima casi ni se ven... yo tengo el slide del lado derecho puse todo el codigo adentro de otro div que lo ubica a la derecha. (antes tenia una imagen fija y se veia bien en la mitad derecha de la pantalla), Estoy probando cambiar las propiedades de position pero no veo cambios.
Muy bueno, sigo practicando. Gracias.
Dale Bro!
Buenas tardes, el infinito lo pude implementar pero este simplemente no me carga las imagenes, caculo que la funcion url no esta encontrandolas, use solo nombre.jpg o ruta completa como hago siempre y nada. No me muestra ni siquiera la imagen de background de la clase slider.
🥰 Genial gracias
Un placer Carlos!
las imagenws deben ser del mismo tamaño ?
Nuevo subscriptor
Elegante el código, gracias por tu tutorial.
Gracias crack!
Implecable! me re sirvio, ahora solo lo tengo que hacer responsive
Que bueno que te haya servido, puedes usar max y min width para responsive sin necesidad de media queries!
@@codeglitch1884 Muchas gracias! lo voy a hacer asi!!
gracias
Excelente video, una duda, ¿Como puedo hacer para que al momento de poner una barra fija se oculte el slider al hacer scroll?
Gracias!!!
Podrías usar las propiedades de scrollbar para configurarlo como tu gustes, pero no logro entender que necesitas exactamente, ¿Me cuentas más?
@@codeglitch1884 coloque un header que tiene position fixed, al momento de agregar el slider, se ve normal, el problema es cuando quiero ir bajando en la página, el slider se coloca encima del header, no se que propiedad debo cambiar
@@fersolisjaime4330 Vale, ya lo tengo!
Simple, solo al header agregale en CSS la propiedad z-index: 2; y ya debería arreglarse, y si no ve subiendo a 3, 4...
Eso debe funcionar.
Hola, buen video, de primera me sirvió, pero tengo una duda. ¿Solo sirve con imágenes con esa relación de aspecto? Lo intenté con imágenes rectangulares (casi cuadradas) en vertical, pero no salen completas ¿Alguien sabe que cosas debo sustituir para que salgan las imágenes completas? Soy nuevo en esto y no sé mucho. Gracias
La idea es que sean del mismo tamaño, porque si son diferentes el aspecto que le pongas puede romper el slide, y por eso es mejor, te puedes ahorrar errores y más en modo responsive
hermano una duda al colocar position:absolute, no me deja seguir desarrollando la pagina web debido a que todos los elementos nuevos que inserto se van detrás de las imágenes y no hacia abajo, como puedo solucionar esto porfavor
Para que no suceda eso, debes meter el slider en un contenedor y la posición absolute debe emparentar a ese contenedor, y el otro contenido mételo en otro contenedor, osea en otro div, o section, o article, ¿me explico?
Me pasa exactamente lo mismo, se sobre ponen al siguiente bloque que tengo y se ve todo mal
Me salio pero como puedo calcular el tiempo de la animacion con los porcentajes todavía no entiendo
10 segundos para 4 imágenes, y divides el número de imágenes pensando que tus 10 segundos son 100%, eso significa que 4/100 son 25
Significa 25% = 2.5 segundos
Hola lo hago igual que el vídeo y no me aparece nada, inspecciono la página y siquiera figura el div, por qué puede ser? ayuda por favor, me encanta como queda el slider así :(
Sonará torpe, pero enlazaste correctamente tu archivo de css?
a mi tampoco
lo hice con 3 imagenes pero el efecto no sale igual las imagenes se estiran hacia abajo
¿Tus imagenes son de diferentes tamaños?
disculpa y para hacerlo manual como lo hago?
Tengo otros videos, puedes buscarlos en el canal
Cómo se puedede mejora de manera responsive?
El responsive siempre se trabaja con porcentajes de esa forma será más fácil, pronto subiré uno totalmente responsive, de momento intenta usar % rem como medidas relativas
buena men , seguiras subiendo material? dejo like y sub
Si, pronto subiré nuevo videos!
hola, ¿cual es la aplicacion que usas en el video?
Visual Studio amigo!
@@codeglitch1884 El normal o el code?
@@adelvisdguez6019 code!
alguien sabe por que no me podría aparecer ?
x2
pero no es responsivo?
Si, si es reponsive
A mi no me funciona :´)
Que parte no te funciona?
@@codeglitch1884 En el slider automatico, no cambia... pero hice el del video de 9 min y ese si me sirvio. gracias! te agradeceria tambien si pudieras subir el repo de este para ver en que falle y gracias
Pero, ¿ Y el link? :v
Siempre está en la descripción bro
necesito el link pa que me puedan pagar en mi empresa :v
no sirve
Funciona perfectamente, hazlo bien bro, no seas flojo 🙄
@@codeglitch1884 tengo un problema, no me funciona :´) y esta hermoso pero no funciona.
Me funcionó super bien adaptándolo a las medidas de mis imágenes, pero me gustaría saber si puedo hacer otro tipo de animación que no sea fade in, tal vez algo como deslizar
@@codeglitch1884 a mi tampoco me funciona sera que tu ocultas codigos y por eso a unos cuantos aqui no le fiunciona eso.