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

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 200

  • @jorgeeliasorozco9101
    @jorgeeliasorozco9101 Рік тому +101

    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
      @codeglitch1884  Рік тому +11

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

    • @alejandrasanchezsalazar3935
      @alejandrasanchezsalazar3935 Рік тому +15

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

    • @ronnyfreitez1731
      @ronnyfreitez1731 Рік тому +2

      Muchas gracias me ayudo mucho tu buena observacion

    • @kokito4753
      @kokito4753 Рік тому +6

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

    • @AngelCh10z
      @AngelCh10z Рік тому +3

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

  • @fred0479
    @fred0479 Рік тому +6

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

  • @yosedcamilosanchez4963
    @yosedcamilosanchez4963 5 місяців тому +1

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

  • @mag1076
    @mag1076 4 місяці тому

    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

  • @guillermohf
    @guillermohf 2 роки тому +41

    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
      @eduardosaroka7967 2 роки тому +3

      Gracias Guille, no me estaba funcionando :D

    • @codeglitch1884
      @codeglitch1884  2 роки тому +2

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

    • @miriamalcorta9555
      @miriamalcorta9555 2 роки тому +3

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

    • @christianllumi
      @christianllumi 2 роки тому +3

      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
      @Soy_Wady_RD 2 роки тому +1

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

  • @Hajar-lm9hd
    @Hajar-lm9hd 23 дні тому +1

    Muy buena explicación, muchas gracias.😄😄

  • @danielleon8451
    @danielleon8451 Рік тому +4

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

  • @manuelcolin7037
    @manuelcolin7037 3 роки тому +4

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

  • @eiros147
    @eiros147 Рік тому

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

  • @kineticavip
    @kineticavip 3 роки тому +1

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

  • @lorenatorres270
    @lorenatorres270 2 роки тому +1

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

  • @hugocangi6214
    @hugocangi6214 4 місяці тому

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

  • @EliasMendez-of1gy
    @EliasMendez-of1gy 2 місяці тому

    Gracias sos mucho mejor que el bootstrap

  • @xXkeissiusXx
    @xXkeissiusXx Рік тому +2

    Muchas gracias bro me sirvió, justo lo que necesitaba

  • @Kaaren_mor
    @Kaaren_mor 3 роки тому +2

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

    • @codeglitch1884
      @codeglitch1884  3 роки тому

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

  • @robertrosario1152
    @robertrosario1152 Рік тому +1

    excelente tutorial. te ganaste un seguidor fiel jejejejeje

  • @Marktheone-e5g
    @Marktheone-e5g 4 місяці тому

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

  • @noramorgan7363
    @noramorgan7363 2 роки тому +1

    Muchas gracias por este video. Muy bien explicado.

  • @emilianotruyen6031
    @emilianotruyen6031 3 роки тому +3

    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
      @Eragon09 2 роки тому +1

      pone el animation en el ul

    • @franciscougarte7247
      @franciscougarte7247 2 роки тому +1

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

  • @oscarseguraramos
    @oscarseguraramos 3 місяці тому

    Gracias grande, te pasaste.

  • @ulisesmak
    @ulisesmak 2 роки тому +1

    Buen video, me sirvio una banda amigo, gracias!

  • @delossantosvivancoabril8830
    @delossantosvivancoabril8830 7 місяців тому

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

  • @EsDaniela
    @EsDaniela Рік тому

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

  • @martineichel2323
    @martineichel2323 9 місяців тому

    Muchas gracias maestro!!

  • @anagitana9867
    @anagitana9867 5 місяців тому

    Muchas Gracias me sirvió demasiado.

  • @nicolasdiazdiaz3973
    @nicolasdiazdiaz3973 10 місяців тому

    Muy buen video 10 puntos me funciono.

  • @HisDuckling
    @HisDuckling 2 роки тому +1

    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
      @codeglitch1884  2 роки тому

      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.

  • @v4l324
    @v4l324 2 роки тому

    Muchas gracias. Te adoro.

  • @Matias_Palacio_V
    @Matias_Palacio_V 8 місяців тому

    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
      @codeglitch1884  7 місяців тому +1

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

  • @andyantoniopaz8938
    @andyantoniopaz8938 2 роки тому +1

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

  • @JonathanBriones-b8p
    @JonathanBriones-b8p Рік тому

    la voz del chico me encantaaaa

  • @PerezLinette
    @PerezLinette 8 місяців тому

    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
      @codeglitch1884  8 місяців тому

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

  • @brianstevepulido7100
    @brianstevepulido7100 2 роки тому +1

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

    • @codeglitch1884
      @codeglitch1884  2 роки тому +1

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

  • @Baldur-Dev-Arts
    @Baldur-Dev-Arts 2 роки тому +1

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

    • @codeglitch1884
      @codeglitch1884  2 роки тому +2

      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.

  • @skerlino
    @skerlino 5 місяців тому

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

  • @gonper352
    @gonper352 2 роки тому +4

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

  • @alebinetti
    @alebinetti Рік тому +1

    excelente tu explicación

  • @luismiguelgalvisrodriguez6197
    @luismiguelgalvisrodriguez6197 Місяць тому

    Buen video bro

  • @stevenleonmacana1698
    @stevenleonmacana1698 3 роки тому +6

    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
      @codeglitch1884  3 роки тому +1

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

    • @stevenleonmacana1698
      @stevenleonmacana1698 3 роки тому +1

      @@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
      @emilianotruyen6031 3 роки тому +2

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

    • @stevenleonmacana1698
      @stevenleonmacana1698 3 роки тому

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

    • @elmandolinxd3190
      @elmandolinxd3190 2 роки тому

      @@stevenleonmacana1698 como lo solucionate?

  • @facundomazza3131
    @facundomazza3131 Рік тому

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

    • @codeglitch1884
      @codeglitch1884  Рік тому

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

  • @gonper352
    @gonper352 2 роки тому +1

    cual seria el porcentaje si necesito 11 imágenes?

    • @codeglitch1884
      @codeglitch1884  2 роки тому

      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?

  • @katymedina6799
    @katymedina6799 4 місяці тому

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

  • @nayelihdz5466
    @nayelihdz5466 2 роки тому

    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
      @codeglitch1884  2 роки тому

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

  • @CrisChavarríaR
    @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
      @codeglitch1884  Рік тому

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

  • @acecarti
    @acecarti 5 місяців тому

    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

  • @juannavarro201
    @juannavarro201 9 місяців тому

    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
      @codeglitch1884  7 місяців тому

      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

  • @josiasmiguelcorreatorales4529
    @josiasmiguelcorreatorales4529 3 роки тому +2

    Muy bueno sigue haci

    • @codeglitch1884
      @codeglitch1884  3 роки тому

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

  • @BenjamínGarcía-u7y
    @BenjamínGarcía-u7y Рік тому

    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

  • @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
      @codeglitch1884  Рік тому

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

  • @Brayan-ig9vi
    @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
      @codeglitch1884  Рік тому

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

  • @rolandogonzalez3839
    @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
      @codeglitch1884  Рік тому +2

      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
      @rolandogonzalez3839 Рік тому

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

    • @codeglitch1884
      @codeglitch1884  Рік тому

      @@rolandogonzalez3839 Que gusto saberlo br, gracias crack!

  • @ezequielsilva6652
    @ezequielsilva6652 2 роки тому

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

    • @codeglitch1884
      @codeglitch1884  2 роки тому

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

  • @EdwinAlexanderVillaTaborda
    @EdwinAlexanderVillaTaborda Рік тому +1

    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
      @codeglitch1884  Рік тому

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

  • @JebusXDYT
    @JebusXDYT 7 місяців тому

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

    • @codeglitch1884
      @codeglitch1884  7 місяців тому

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

  • @axelekopi3807
    @axelekopi3807 Рік тому

    muy buen video y muy bien explicado

  • @Ivax0081
    @Ivax0081 2 роки тому

    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
      @codeglitch1884  2 роки тому +3

      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
      @Ivax0081 2 роки тому +2

      @@codeglitch1884 si perfecto muchas gracias 😊

  • @arielfuentes3775
    @arielfuentes3775 7 місяців тому

    se puede en vertical?

    • @codeglitch1884
      @codeglitch1884  7 місяців тому

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

  • @AlfonsoLi
    @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
      @codeglitch1884  Рік тому

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

  • @ann.voorhees_13
    @ann.voorhees_13 2 роки тому

    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
      @codeglitch1884  2 роки тому

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

  • @yoaos8125
    @yoaos8125 9 місяців тому

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

    • @codeglitch1884
      @codeglitch1884  7 місяців тому

      que raro, este ejemplo que muestro esta en chrome 🫠

  • @tomashidalgo1303
    @tomashidalgo1303 2 роки тому

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

  • @henryvladimircontreraschav584

    Y para colocar 2 imagenes como seria?

    • @codeglitch1884
      @codeglitch1884  Рік тому

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

  • @juanxoh1987
    @juanxoh1987 3 роки тому

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

  • @hugo8217
    @hugo8217 3 роки тому

    como puedo hacer para meter un enlace en cada foto?

    • @codeglitch1884
      @codeglitch1884  3 роки тому

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

  • @HkStreamlugo
    @HkStreamlugo 2 роки тому

    me exploto el cerebro

  • @minombreesCaro
    @minombreesCaro Рік тому

    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
      @codeglitch1884  8 місяців тому

      Agrega más tiempo en los segundos que colocas

  • @diegogaraviz3440
    @diegogaraviz3440 2 роки тому

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

    • @codeglitch1884
      @codeglitch1884  2 роки тому

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

    • @christianllumi
      @christianllumi 2 роки тому

      @@codeglitch1884 Tengo el mismo caso.

    • @christianllumi
      @christianllumi 2 роки тому

      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.

  • @ivethcortez7348
    @ivethcortez7348 8 місяців тому

    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
      @codeglitch1884  7 місяців тому

      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

  • @carrisolucionesinformaticas
    @carrisolucionesinformaticas Рік тому +1

    muy bueno

  • @sebastiangonzalez1381
    @sebastiangonzalez1381 2 роки тому +1

    heroe

  • @dulcemasse7462
    @dulcemasse7462 Рік тому

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

  • @djninomixxd
    @djninomixxd 3 роки тому +1

    Esto es responsive?

    • @codeglitch1884
      @codeglitch1884  3 роки тому +1

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

    • @SAL73VFX
      @SAL73VFX 2 роки тому

      @@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
      @codeglitch1884  Рік тому +1

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

    • @lucassansone8351
      @lucassansone8351 Рік тому

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

  • @codeglitch1884
    @codeglitch1884  3 роки тому +3

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

  • @vitorolivera11
    @vitorolivera11 2 роки тому +1

    Muito bom e fácil de entender obrigado 😸

  • @claudiaod6028
    @claudiaod6028 2 роки тому

    mis imagenes nosee centraron tampoco me el slider

    • @codeglitch1884
      @codeglitch1884  2 роки тому

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

  • @marioNeto2022
    @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
      @codeglitch1884  Рік тому +1

      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
      @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....

  • @the_kyo.567vsIori.
    @the_kyo.567vsIori. 9 місяців тому

    5:52

  • @alexandermendoza754
    @alexandermendoza754 2 роки тому +1

    allah aap ko hamesha khush rakhay

  • @zerteruz
    @zerteruz Рік тому

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

  • @euriselias4240
    @euriselias4240 3 роки тому

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

    • @codeglitch1884
      @codeglitch1884  3 роки тому

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

  • @zahirdigital
    @zahirdigital 2 роки тому

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

    • @codeglitch1884
      @codeglitch1884  2 роки тому +2

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

  • @matubustamante1449
    @matubustamante1449 Рік тому

    jajajajaj se me esta zoomeando la imagen en vez de pasar

    • @codeglitch1884
      @codeglitch1884  Рік тому

      Checa que propiedad estás animando en los keyframes

  • @enrichulk9077
    @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
      @codeglitch1884  Рік тому

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

  • @vladsnowli7713
    @vladsnowli7713 2 роки тому

    no se desplaza xD haci que mejor descargue el archivo xD

  • @jairoyamarte1514
    @jairoyamarte1514 2 роки тому +1

    soy el unico que solo le sale una imagen :C

    • @codeglitch1884
      @codeglitch1884  2 роки тому

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