Crea un Carousel Responsive Fácilmente con Glider.js

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

КОМЕНТАРІ • 245

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

    He visto más de 10 videos tanto en inglés como en español, intentando encontrar la manera más efectiva y menos pesada de aplicar un slider simple en mi sitio web para una sección de testimonios.
    Este es el mejor video que he encontrado al respecto.

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

      Muchas gracias, me alegra que te sirviera!

  • @JuanHernandez-zf7lw
    @JuanHernandez-zf7lw 3 роки тому +1

    jajaja! Justamente estoy creando un proyecto que sé que revolucionara el mundo y quería algo parecido a unos slider de netflix y me encuentro este video, definitivamente desde el día 0 cuando aprendí a programar y todo fue en este canal y aún, éxitos falcon!

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

    amo y señor del código fuente y la docencia, lo amo, hice varios cursos de él en distintas plataformas, un genio

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

    Wow!! Carlos. Siempre sorprendiendo con cursos y tutoriales muy prácticos e instructivo. Cuando dejo de seguir tus cursos en Udemy por razones de prioridad entró en depresión. Jaja. Es que haces esto de la programación web muy amena y divertida. De verdad. Dios te bendiga estas clases son bien caras recibirla a un nivel tan didáctica y fácil de entender.
    Con tus cursos es como estar en un bootcamp a tiempo completo y de provecho.
    Sigue así, tengo que aprender mucho de tí y te queda mucho por compartir y enseñar.
    Gracias de corazón.

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

    Fino hermano me encanto, ahora voy a hacer unas cuantas cosas con esto...!!!

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

    un videaso!!!!! te sigo desde que tome un curso de boostrap contigo en udemy, por eso vine a tu canal y ahora que quiero hacer mi propio carousel y no depender del de boostrap me siento mas que contento de haber tomado la decisión de tomar clases contigo.

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

      Muchas gracias! Me alegra un montón que mis videos te sean de ayuda !

  • @nico.moitino
    @nico.moitino 2 роки тому +1

    exelente video hermano ,estuve viendo miles de videos de como crear un carousel y nadie lo explicaba bien ,te haz ganado un suscriptor sigue asi

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

    Esto es lo que estába buscando por mucho tiempo, tengo que hacerlo un día!!! Graciaaaaas!!

  • @lorenainfanter.3099
    @lorenainfanter.3099 3 роки тому

    El único video que me ha servido! Muchas gracias!!

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

    Eres un crack.. me encantó lo fácil que es usar esa librería y lo bien que lo explixas

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

    En su día trabajé con jSlider, pero tenía muchos fallos en el diseño responsive.
    Muchas gracias, Carlos Arturo.

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

    Gracias, estaba buscando hace harto uno para integrarlo con Nuxt ya que uso Vuetyfy y no se porque a veces no se mostraba, instale varias librerías hasta que vi este video y ha sido la mejor y la que 0 problemas a dado, gracias amigo.

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

    Este canal es lo mejor, aprendes mucho y es muy facil de comprender, selos recomiendo mucho. Gracias

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

    Excelente tutorial, muchas gracias CRACK!!

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

    Amigo tu curso de HTML me a servido mucho, ni los maestros explican cómo lo ases brot, saludos desde Honduras.

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

    Excelente !!! encontre lo que buscaba. Muy bien explicado ... todo muy claro. Muchas Gracias !!!

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

    Excelente, sos un genio. Muchisimas gracias pana!

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

    Espectacular !!! Millones de gracias, me diste una ayuda gigante !!! Éxitos !!!

  • @DebastoLautaro
    @DebastoLautaro 4 роки тому +12

    Para centrar verticalmente las flechas y no calcular a ojo los 35px deberías darle top: 50% y transform: translateY(-50%) ya que el top actúa sobre el porcentaje del padre posicionado y el transform sobre el porcentaje del propio elemento.. pero igual así funciona para esto

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

    Realmente claro, ordenado y didáctico. Gracias, eres muy generoso.

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

    Me salvaste en un problemon del trabajo, muchas gracias Falcon, eres grande!

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

    estoy viendo este video y me esta gustando mucho. De hecho, el anterior que he visto de carousel que trata sobre los postres, me ha servido para adaptarlo a la pagina que estoy creando y el de netflix y este me serviran para adaptarlos a otra seccion de mi pagina. Muchas gracias por todo. Gracias a ti seguro que muchisima gente que empieza a programar estara aprendiendo muchisimo. Yo el primero. GRACIAS

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

    Que grande siempre me salvas man sos un maestro sigue asi

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

    Gracias maestro!!! sos un grande. -Me suscribi para seguir tus videos.-

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

    Excelente explicación, muy buen video

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

    Me ayudaste un MONTON falcón te doy muchísimas gracias, no conocía glider.js I liked

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

    Excelente, por fin encontré como hacerlo de manera fácil y rápida. Gracias!!!

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

    Que la cuarentena no detenga las grandes ganas de aprender

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

    Bueen video falcon eres el mejor e aprendiendo mucho gracias a ti desarrollo mi primer sitio web te lo agradezco mucho eres el mejor sigue asi

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

    Eres increíble! Muchas gracias por tu video!

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

    gracias por tus videos, voy entendiendo esto de programacion gracias a ti

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

    Gracias lo hiciste de una forma clara y muy práctica 😊

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

    Excelente video, muchas gracias por enseñar. Saludos!

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

    VIDEAZOOOOO, TUTORIALAZOOOOO!!!!

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

    Gracias por compartir este resultado compañero, un abrazo.

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

    Muy padre. Muy bien explicado. Gracias

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

    Me sirvió de mucho Carlos muchísimas gracias por tus contenidos de calidad 👍😊

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

      Me alegra mucho que te haya servido!

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

    Muchas gracias Carlos por el video. Muy bueno!

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

    Gracias por compartir estás cosas! Me ayudan muchísimo!

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

    buen video! , consulta como puedo hacer para q vaya cambiando de forma automática?

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

    Que excelente! justo lo esperaba! Muchas gracias :D

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

    genial bro' me ayudaste mucho para uno que deseaba hacer

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

    5:54 Falcon en que video lo explicaste? Es que soy nuevo en el canal y solo queria buscar un tutorial para hacer un slider

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

    Gracias como siempre, contenido genial en este canal.

  • @hectorPerez-qf1ho
    @hectorPerez-qf1ho 3 роки тому

    QUE GRANDE QUE ERES

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

    Muchisimas gracias

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

    Genial! me ha servido mucho Glider.js, explicas muy bien, tengo la página programada con php si quieres chequearla... pero mi problema actual es que quisiera hacer el carousel infinito:
    Si tengo un total de 6 imagenes cargadas y en el carousel tengo diapositivas de 4 imágenes, quisiera que al desplazar el carousel a la izquierda desplazara sobre las siguientes(6,5,4,2), y lo mismo si desplazo a la derecha(5,6,1,2).
    Espero haberme hecho entender, y gracias de antemano.

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

    Existe alguna manera de que en la versión móvil se pueda deslizar arrastrando con el dedo?

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

    Genio, maestro , barrilete cósmico, ¿ de que planeta viniste???? Gracias!!!

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

    ¡Está genial ese carrusel Carlos! :D... Actualmente estoy tomando tu curso de Diseño Web Profesional, vine a ver el vídeo de que hiciste de Bob Sponja con HTML y CSS. Estoy aprendiendo bastante de tu curso :D
    Por cierto, también ya he comprado tu PHP ;)
    ¿Tienes pensado en un futuro sacar algún otro curso en Udemy? Me gusta mucho la manera en como explicas y enseñas :D

  • @JoseDavid-kd4ff
    @JoseDavid-kd4ff 2 роки тому

    Hola,esta libreria se puede utilizar con react

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

    chingon hermano , sigue así , GRACIAS

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

    Gracias por compartir un abrazo =)

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

    otra pregunta, entonces no se puede hacer lo del hover en los elementos del carousel?

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

    Muchas gracias me sirvio bastante, saludos amigo

  • @diego-tp8fv
    @diego-tp8fv 4 роки тому +1

    gracias a ty ya se un poco de programacion
    solo hay algo que no puedo como puedo agregarle contenido dentro de las imagenes

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

    hola, para el navegador internet explore no funciona como seria por fa

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

    Gracias por el video, una consulta, si trabajo con angular como podria agregarlo al proyecto?

  •  4 роки тому

    Genial el vídeo, me ayudara en algunos proyectos

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

    Gran vídeo
    Muchas gracias!!

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

    Bro en definitiva eres un crack, y te agradezco bastante por tu tiempo y tus conocimientos compartidos, gracias a ti soy el mejor de mi clase en desarrollo web :3 Gracias

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

      Hey! muchas gracias a ti por ver mis videos, y felicidades por ser el mejor en tu clase, sigue así! :D

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

    Hola como estas .... muy buen contenido el único que eh podido integrar a mi proyecto me sirvió mucho... solo tengo una pregunta en la propiedad draggable: true, de app.js para dejarla activa las fotos se quedan quietas cuando las corres y se ve mitad de una y mitad de la otra cuando las sueltas, como hago para que se autocomplete osea que reconozca que va a la mitad y ella misma se termine de correr para mostrarse completa... espero que me haiga echo entender gracias =)

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

    Gracias, muy entendible, solo una pregunta, como hago para tener 2 carruseles de imagenes, he intentado copiar y pegar el mismo codigo 2 veces pero el segundo no coge el JS no el CSS, gracias

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

    Tremendo crack!!!, un sub mas ! :D

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

    Genial el video como siempre!! Estoy usándolo dentro de una app de Angular9 y el problema surge por el evento window.addEventListener('load', function... Glider.js me crea el slider cuando refresco de forma manual.

  • @Zero-yt1og
    @Zero-yt1og 3 роки тому +2

    14:16 no me aparece el scroll. que podria ser? :C revise el codigo bocha de veces y nada :c.
    Si alguien me ayuda lo agradeceria.

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

      me pasa lo mismo :c

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

      estoy en la misma

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

      @@Bioshock_84 Los solucionaste...me pasa igual

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

      @@DavidFZapataCastro no, me fue imposible, al final decidí no usar glider y programar todo de cero.

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

    Hola, q diferencia hay entre hacer la librería con css y js , q hacerlo con librería, me refiero a escalabilidad y al conseguir trabajo????????????????????

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

    Genio gracias 👏👏👏👏👏

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

    GRACIAS maestro!!

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

    Excelete video hermano!!! Como hago para duplicar el carrusel, es decir que quede el encabezado y luego debajo dos carrusel

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

    si las imagenes son rectangulares hacia arriba y abajo como puedo modificar los px

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

    en el carrusel como haria si solo quiero que se muestre una imagen gracias ?

  • @nemesis-2023
    @nemesis-2023 8 місяців тому

    Si o si se usa glider o se puede reemplazar con otra cdn?

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

    Hola Carlos, ya lo tengo implementado, pero no puedo hacerlo que funcione como autoplay, alguna forma? gracias.

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

    Buen video bro ya lo apliqué a mi proyecto..muchas gracias ahora una pregunta como lo hago con slide automatico..

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

    Hola Carlos una pregunta el ¿Carousel se mueve solo?

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

    Eres un dios crack

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

    Excelente tutorial FalconMasters, igual que tus otros tutoriales, tengo una duda en este video, como hago para que las fotos sean mas grandes, no he encontrado como habilitar el tamaño normal de la imagen.
    GRACIAS

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

      Por si a alguien le sirve, encontré una solución para agrandar la imagen del carrusel y era fácil, colocar 1 en slidesToShow y slideToScroll abajo de Breakpoint 800

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

    espectacular... mejor imposible...

  • @luiscarmona5175
    @luiscarmona5175 11 місяців тому

    Hola, en que curso de udemy enseñas a crear el carrusel desde 0 ?

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

    Muchas gracias por tus conocimientos que nos brindas. Una pregunta como haces para que todas las imágenes utilizadas en este tutorial tengan las mismas dimensiones 550 x 310

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

      Hola Fredy, consulta, pudiste cambiarle el tamaño a las imágenes?.

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

    excelente explicacion,
    tengo un problema, al poner esto en la pagina que estoy armando, el carousel funciona perfectamente pero si agrego 1 mas deja de funcionar, como puedo arreglar esto? Si me pueden responder rapido perfecto, tengo que entregar esta pagina en pocos dias y no puedo lograr tener 2 carousel

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

    Como lo conviertes en touch?

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

    existe una forma de ponerle tiempo y se mueva en automatico??

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

    amigo excelente video, tengo una duda al poner una barra de menu superior no me deja y aparece al lado aun ponienedo el row para nueva fila, me ayudas? gracias

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

    Genio gracias

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

    si quiero usar ese mismo codigo en otra parte del home con las mismas clases pero diferente contenido, se daña que puedo hacer ? o glider js solo funciona para un solo slide en toda la pag ? ayuda por favor

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

    Muchas Gracias, excelente video! Hago tus cursos en udemy. Una consulta, necesito cambiar los indicadores por números de página , por ejemplo":( 1..45)..Siguiente. " Como lo puedo hacer? Espero respuestas. Gracias de antemano!!

  • @edwinalexadnerbernardinomo2486

    Hola una pregunta como se hace para que el carrucel pasen las imagenes automaticas

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

    Saludos desde Chile:
    Me gustó bastante la sencillez del resultado; excelente video, pero me quedó una duda. Pongamos un ejemplo: Si la galería que mostraste en el video corresponde a una sección de la galería, que podría ser "Paisajes Urbanos", pero también requiero de otra galería, dentro de la misma página y que se denomine "Paisajes Rurales"; me gustaría saber cómo se puede agregar en una segunda galería en la parte inferior de la misma página. Podrían tener un subtítulo con "h2" o "h3", con el fin de poder individualizar cada una de las secciones o temas. Pero la idea es que quede en forma horizontal, igual que el observado en el video (lo he intentado, pero me queda en forma vertical).
    En cuanto a todo lo demás, me ha quedado claro.

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

      Si te queda vertical estás colocando un comando mal, échale un ojo al vídeo y escríbelo tal cual

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

    Muy bueno!! Alguien sabe como hacer para que el dragable funcione el celular? por favor

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

    Infinitas gracias. New Sub + Like + Bell + shared.

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

    Excelente todo, pero esta vez algo anda mal las imagenes aparecen en forma vertical he revisado todo y sigue el error...ojala alguien pueda ayudarme

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

    Eres el mejor :)

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

    Muy buen vídeo ya que te ahorras picar tanto código para hacer un simple slider. Pero podrías hacer el mismo slider responsive sin usar js ni frameworks como bootstrap?. Es decir puro html y css. Te lo agradecería un montón ya que tengo un proyecto en el que no me dejan utilizar dichas tecnologías. Un saludo desde España.

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

    La verdad muy bueno, solo que no se puede tener mas de un carrousel, si copio y pego desde para tenes una segunda tira de imágenes supongamos una nueva categoría de películas se rompe la segunda y no queda como la primera

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

      pudiste resolver eso? me sucede lo mismo y no encontre solucion

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

    Hola que tal muchas gracias me ayudo muchísimo, una duda ¿Esta misma librería se puede utilizar para angular? de antemano gracias excelente video

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

      Hola que tal de casualidad pudiste usarlo para angular? y si es asi me contas como lo hiciste, muchas gracias

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

    Excelente, me encantó.
    Sólo quisiera saber cómo puedo hacer para hacerlo automático y que repita los sliders.

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

      Hola que tal, bootstrap hace eso que quieres, acabo de ver el video y leer tu comentario, espero te ayude y no sea tarde.

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

    que opinas de swiper.js

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

    Hola buenas tardes, sabes como puedo hacer que al llegar al ultimo slider regrese al primero?