Carrusel de imagenes | HTML CSS y JavaScript

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 47

  • @ValeraJava1
    @ValeraJava1 4 года назад +3

    Eres grande, gracias por compartir tus conocimientos compañero.

  • @martinleosgarcia2530
    @martinleosgarcia2530 4 года назад +2

    Muy bueno, gracias por compartir

  • @JOSEDEJESUSPEÑAGARCIA-u9o
    @JOSEDEJESUSPEÑAGARCIA-u9o Год назад

    te la rifaste fernando

  • @javv1748
    @javv1748 4 года назад +1

    Gracias Hermano gran aporte

  • @Lanzelord
    @Lanzelord 2 года назад

    Grande

  • @descargafacilyt
    @descargafacilyt 3 года назад

    Excelente video! nuevo sub

  • @andrebejarano4932
    @andrebejarano4932 2 года назад

    buttonPrev.onclick = () =>Move(1);
    buttonNext.onclick = () =>Move(2);
    me tira erron en esta parte alguien sabe???

  • @carlossanty5259
    @carlossanty5259 3 года назад

    y como harias, para que se mueva de izquierda a derecha?

  • @marialafont855
    @marialafont855 3 года назад +2

    Hola! Genial el tutorial, tengo que hacer algo asi para un tp y me sirve mucho. En el caso de dispositivos mobiles, ¿seria muy complicado sacar las flechas y que el desplazamiento funcione con el dedo?

    • @keepcode8555
      @keepcode8555  3 года назад

      Gracias Maria Lafont. Y no, no sería complicado.

    • @nivalv9881
      @nivalv9881 2 года назад

      @@keepcode8555 Como se hace ?

  • @stodani
    @stodani Год назад

    i love it! i have just one issue. When i run out of pictures i can keep scrolling through "nothingless". Is there a way i can fix this?

  • @candyneirarodriguez2325
    @candyneirarodriguez2325 3 года назад +5

    Hola, ¿cómo podría hacer para que al llegar a la última imagen me regresé a la primera? Muy buen video

    • @juancorso6340
      @juancorso6340 2 года назад

      en el js deberias de indicar que si hace un lcik mas tendria que avisar que el indice es el ultimo elemento del array

    • @dipspad5110
      @dipspad5110 2 года назад

      @@juancorso6340 como amigo?

    • @juancorso6340
      @juancorso6340 2 года назад

      @@dipspad5110 que necesitas hacer?

    • @dipspad5110
      @dipspad5110 2 года назад

      @@juancorso6340 que se regrese a la primera imagen jaja :,v, aiuda

    • @juancorso6340
      @juancorso6340 2 года назад

      @@dipspad5110 si solo querés un slider, usa splide.js.

  • @teamsoftcode7883
    @teamsoftcode7883 3 года назад

    Sería genial si pudieras agregar un slide automático y retorno infinito..

  • @justinbaezmoquete2237
    @justinbaezmoquete2237 2 года назад

    Hey excelente carruse, pero seria bueno volverlo responsive

  • @mayma721
    @mayma721 3 года назад

    Excelente aporte tiene funcionalidad y elegancia
    Tienes algún ejemplo con esa elegancia pero para grid de imágenes no en carrusel?

  • @iilerk1272
    @iilerk1272 2 года назад

    hay alguna forma de meter el carrusel en un Div?

  • @sixliain7830
    @sixliain7830 3 года назад

    necesito ayuda, no me funciona

  • @loretodelpilargarciaorella6086
    @loretodelpilargarciaorella6086 3 года назад

    como podría hacerlo para que ademas que animarse al hacer click, avance automáticamente?
    Gracias, muy bueno el video :)

    • @keepcode8555
      @keepcode8555  3 года назад

      Tendrías que usar las animaciones en JavaScript. Aquí te dejo un link para que puedas leer e investigar más sobre ello developer.mozilla.org/es/docs/Web/API/Element/animate

  • @alvaroandresalfonsorodrigu8071
    @alvaroandresalfonsorodrigu8071 2 года назад

    hola, me gustan muchos tus videos me parece genial... tengo una duda, sigo todos los pasos que tu haces pero al finalizar cuando le doy clic en las flechas no me corre el carrouel, que puedo hacer???,

  • @jonathanfloresesparza6019
    @jonathanfloresesparza6019 2 года назад

    Hola, el video ha sido genial y de mucha ayuda, pero tengo una duda, ¿cómo podría hacer que en lugar de que las imágenes avanzaran una a una, avanzaran de 5 en 5 (es decir, que avanzaran de acuerdo a los grupos que se ven en pantalla)?

  • @a1020714
    @a1020714 4 года назад +1

    track.style.left == "" ? leftPosition = track.style.left = 0 : leftPosition = parseFloat(track.style.left.slice(0, -2) * -1); como logras esta linea? de donde puedo estudiar este tipo de codigo q hiciste?

    • @keepcode8555
      @keepcode8555  4 года назад +2

      Ok, si te refieres al operador condicional (ternario) Aquí a un link que te puede ayudar a entender como funciona:
      developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Conditional_Operator
      Ahora bien, si te refieres a la lógica, específicamente en esa línea estoy preguntando lo siguiente:
      El track se ha movido?? Si la respuesta es "" (Es decir vacío). Entonces iguala la variable leftPosition al valor del track (Que es 0).
      Si, es diferente de "" (vacío), entonces iguala la variable leftPosition al valor del track (Diferente de 0)
      También puedes encontrar el código en mi GitHub y probarlo si quieres. :)
      Código: github.com/juliodaal/Carrusel-de-Subcategor-a

  • @danielyourbri
    @danielyourbri 3 года назад

    bueno

  • @dreamwevermax2499
    @dreamwevermax2499 4 года назад

    joyita la pagina estas super buena!!! Queria preguntarte¿COMO LO PUEDO ADAPTAR PARA QUE SEA RESPONSIVE? gracias maestro

    • @keepcode8555
      @keepcode8555  4 года назад

      Para hacerlo más responsive de lo que es, debes usar los Media Queries: Aquí tienes un link para que veas como se usa:
      www.w3schools.com/css/css_rwd_mediaqueries.asp

  • @guillermovelez1572
    @guillermovelez1572 3 года назад

    Es igual en typescript? Buen video

  • @miguelburet4170
    @miguelburet4170 3 года назад

    si a los div y a los ID le pusieras nombres que describan su funcion seria mejor

  • @choster9008
    @choster9008 3 года назад

    Responsive ?

  • @anny7792
    @anny7792 4 года назад

    Quiero poner 2 veces el carrusel, pero el segundo ya no funciona

    • @keepcode8555
      @keepcode8555  4 года назад

      Esto puedes ser porque tal vez tengas que adaptar el código JavaScript a dos carruseles.

    • @leandroolivera6620
      @leandroolivera6620 3 года назад

      @@keepcode8555 Hola podrias ayudarme en como podria adaptarlo a mas de un carrusel? desde ya muchas gracias por el aporte del video.. Saludos

    • @keepcode8555
      @keepcode8555  3 года назад +1

      ​ @Leandro Olivera Que tal Leandro y Karly? he modificado un poco el código para que funcione con más de un Carrusel. El código se encuentra en mi GitHub -> github.com/juliodaal/Carrusel-de-Subcategor-a

    • @leandroolivera6620
      @leandroolivera6620 3 года назад

      @@keepcode8555 genial...te lo agradezco por tu ayuda...estoy todavia aprendiendo JS... Por eso me cuesta...pero muchas gracias por la ayuda que nos das....saludos

    • @mayyk12
      @mayyk12 3 года назад

      @@keepcode8555 si quisiera agregar N carrusel en una misma hoja de html ¿qué pasos debo de seguir? es que si agrego uno más ( es decir para tener más de 2 carrousel) se muestra a la mitad el primer carrousel y el resto si se ven , espero me puedas ayudar

  • @yeinernaranjo9639
    @yeinernaranjo9639 4 года назад

    ¿Qué tema usas en VS Code?

    • @keepcode8555
      @keepcode8555  4 года назад

      Community Material Theme : darker high contrast
      marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-community-material-theme
      Material Icon Theme
      marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

    • @yeinernaranjo9639
      @yeinernaranjo9639 4 года назад +1

      @@keepcode8555 Gracias, esta re chido

  • @nadiabelengallardo851
    @nadiabelengallardo851 4 года назад

    Tienes disponible el codigo?

    • @keepcode8555
      @keepcode8555  4 года назад

      Claro, está en mi GitHub el link es github.com/juliodaal/Carrusel-de-Subcategor-a . También está en la descripción de este video.