Cómo Crear un Slider Automático con HTML y CSS | Sin JavaScript

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

КОМЕНТАРІ • 68

  • @SLeeDw
    @SLeeDw  4 роки тому +5

    Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    🌐 Visita mi sitio web para más recursos 👇🏻:
    - bit.ly/sleedw
    📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
    - bit.ly/sleedw-grupo-whatsapp
    🔵 Síguenos en Facebook 👇🏻:
    - bit.ly/face-oficial-sleedw
    ▶ Saludos y que Dios te bendiga. 🙌

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

    Muy bueno. Me encantó! Sencillo, claro, bien explicado y por si fuera poco con la opción para descargar códigos e imágenes ¡Muchas gracias!

  • @misaelf.manzanares4190
    @misaelf.manzanares4190 Рік тому +5

    Llevaba rato tratando de hacerlo y no podia, me salvastes. Eres el mejor❤

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

      Muchas gracias. Saludos 🙌

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

    Hola, me ayudas mucho en mi proyecto web, realmente ayuda mucho este tipo de videos muchas gracias

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

      Fue un placer ayudar. Bendiciones

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

    Excelente, este video me ha servido mucho con mi trabajo.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 роки тому +6

    Genial justo queria hacer esto , oajalá subas mas contenido asi , desde navbar y demas

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

      Muchas gracias por tu comentario. Subiremos más contenido al canal. Saludos y Bendiciones 🙌💻

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

    BIEN ESPLICADO MI BRO

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

    y si quiero añadir ms de 4 imagenes al slider como seria en ese caso?

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

      Puedes agragar mas con imagenes en el HTML y en el CSS .slider ul{width:400%} aumentarle 100% x cada imagen y aumentar el patron en @keyframes{ margin-left: %;} darte cuenta del patron dividido entre 4 solo agrega 5 con -400% entre el 0% a 100% .

  • @CesarGarcia-lw2ns
    @CesarGarcia-lw2ns Рік тому +3

    Hola, en mi proyecto quiero meter mas de 4 imagenes al slider, que valores de porcentaje se deberian manejar en el keyframes? o en cuanto tengo que dividir cada bloque? gracias

  • @Unimaz_Studios
    @Unimaz_Studios 4 роки тому +4

    Que efecto tan bueno, LIKE

    • @SLeeDw
      @SLeeDw  4 роки тому

      Muchas Gracias bro👍!! En unos minutos subiré un video tutorial, espero que no te lo pierdas que estará increible👏

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

    muy buen video bro!

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

    excelente!!! lo intentaré en mi proyecto!

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

    Graciass !

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

    muchas gracias!

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

    hola, tengo un problema, cuando utilizo la propiedad animation: cambio blablabla, me toma el nombre de la animacion como si fuera codigo, no me aparece en formato texto

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

    bro, quiero incluir este slider en mi proyecto pero por algún motivo se genera espacio entre sliders, no se a que puede deberse

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

    gracias bro , funciona de 10

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

      Hola, muchas gracias por tu comentario. Saludos y Dios te bendiga🙌💻

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

      @@SLeeDw lee,cuando el slider llega a la ultima imagen,vuelve a la primera imagen y de nuevo a la ultima imagen,cuando llega a la ultima imagen ahi si comienza funcionar bien porque va de 100% a 90% y asi sucesivamente, me podias decir por que va de atras para adelante?

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

    Muchas gracias querido

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

    Muy buen tutorial, muchas gracias!

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

      Hola, muchas gracias por tu comentario. Saludos y Bendiciones🙌💻

  • @MusicA-qc7hs
    @MusicA-qc7hs 3 роки тому +2

    Gracias a ti termine mi tarea xD Un saludo

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

      Hola, nos alegra muchísimo a ver ayudado, Saludos y Dios te bendiga🙌💻

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

    buena mi bro si me sirvio

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

      Muchas gracias, Saludos.

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

    Muy buen video bro!

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

      Muchas gracias. Saludos y Bendiciones💻🙌

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

    funciona pero al hacerlo me achivo las imagenes y se movio todo sl slide a la isquierda bien chico, quisera terlo en el centro

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

    capo hice todo y me sale una imagen una a la par de la otra no me queda como a vos:(

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

    Que tal, me ha resultado imposible encajar mis imágenes al slider, modifique el archivo estilos.css para que no ocupara toda la pantalla, edite .slider{ imágenes al 70, pero no cuadran las imágenes, no encajan, también trate modificando las diferentes propiedades del archivo estilos.css y siguen sin encajar, se corta una parte de ellas en el slider, que puedo hacer? gracias.

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

    Una pregunta, si quiero que las imagenes no tengas esa animacion de movimiento y cambien de repente como hago?

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

      Le cambias a 0 segundos en vez de a 20

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

    que wen video :V

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

    y usando solo 3 imagenes como lo podrias hacer ? ayuda

  • @extorrote
    @extorrote 6 місяців тому +1

    Porque no me está agarrando la animación , a alguien más le pasa ?

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

    consulta.. la animación sólo se ve cuando se sube al navegador? Gracias!

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

      Hola Lucia, muchas gracias por comentar, respecto a tu pregunta, la animación se ve siempre y cuándo este ejecutado el archivo html de este proyecto en tu navegador, si tienes algún problema o alguna duda acerca de este proyecto, te invito a que te unas al grupo de whatsapp, para poderte ayudar mejor con cualquier problema que tengas.. este es el Link de invitación , Únete y se parte de está comunidad de programadores 🙌👉chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8

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

    mmm y es posible, hacer un slider como este dentro de un div sin tener acceso al head ni a colocar hojas de estilo? me pregunto yo

    • @MusicA-qc7hs
      @MusicA-qc7hs 3 роки тому

      Necesitas de CSS hasta donde yo se pero existe una forma de evitar crear un archivo extra si a eso te refieres :3

  • @mr.firecat4536
    @mr.firecat4536 7 місяців тому

    no me funciona, al momento de ubicarlo, simplemente aparece la primera imagen y esta se desliza de a poco de lado a lado, sin mostrar el resto de imagenes

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

    Buenas noches!
    Excelente video!!
    No pude unirme al chat de whatsApp xq ya está lleno, tendrán otro grupo?

  • @David-ask
    @David-ask 2 роки тому

    buenas queria saber como puedo achicar el tamaño ?? intente ponerlo en 250px pero no funciono

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

      No c, pero avrr pasa tu correo para que lo solucionemos c:

  • @miguelangelcuencapena9126
    @miguelangelcuencapena9126 4 роки тому +1

    hola buenos dias que pena no me coje estoy utilizando sublime text no me esta sirviendo que me aconseja gracias

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

      Debería de coger sino utiliza visual studio code y sale rapido

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

    es responsive?

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

    hola, amigo, lo hice, y todo me quedo bien, menos que e sider se va para el lado izquierdo en la ultima foto y se queda en blanco, es decir, como si no quedara infinito, luego, se devuelve y se repite lo mencionado

    • @SergioTorres-lk2ee
      @SergioTorres-lk2ee Рік тому

      possiblemente tienes menos de 4 imagenes lo mismo m pasaba mi ,en los keyframes esta dividido para usar 4 imagenes

  • @a.emmanuelckorderohernande4177
    @a.emmanuelckorderohernande4177 4 роки тому +1

    Eres la ostia broder.

    • @SLeeDw
      @SLeeDw  4 роки тому +1

      Hola Emmanuel, gracias por tu comentario, eres un crack también💻🙌
      Saludos y Éxitos..

    • @a.emmanuelckorderohernande4177
      @a.emmanuelckorderohernande4177 4 роки тому +1

      Oye broder y este slider podria funcionar ocupar videos en lugar de imagenes ?

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

    Tengo un problema, es el siguiente:
    Yo tengo que agregar 9 imágenes, desconozco si eso afecta al código, y cuando la 9na imagen termina de salir quedan como 10s en blanco la tira para volver a empezar desde la 1ra; con "quedan como 10s en blanco" me refiero como si pusiera 2 imágenes de 5s cada una para que el slider le de tiempo a cargar de vuelta.
    No sé si me expliqué bien, si alguien me puede ayudar se lo agradecería.

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

      solo agregale otra imagen y listo otro li

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

      @@armandorafaelccahuanagueva5262 ya lo intenté, pero como dije, es como si después de la última imagen se agregaran otras pero en blanco y queda en loop con esa tira blanca

  • @juancarlosdiazsantacruz1788
    @juancarlosdiazsantacruz1788 4 роки тому

    si agrego mas imagenes ya no me agrega al slider

  • @D.E.77
    @D.E.77 2 роки тому +1

    las imagenes tienes que ser de algun tamaño en especial???
    todas las imagenes tienen que tener el mismo tamaño?

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

      Si mi estimado, las imagenes deben ser del mismo tamaño.
      Saludos y Bendiciones.

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

      @@SLeeDw no me funciono con tamaño de imagenes grandes de 1920 * 800

  • @judithcristinaquinonesinga3065
    @judithcristinaquinonesinga3065 4 роки тому

    Cuando coloco 400% width, me aparece um scroll horizontal :s