Carrousel de Imágenes con JavaScript y HTML5

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

КОМЕНТАРІ • 135

  • @LexterDev
    @LexterDev  4 роки тому +8

    Muchos me han preguntado sobre cómo agregar transiciones a las imágenes. Así que acá les dejo un vídeo más avanzado que hice, con transiciones e indicadores. Link: ua-cam.com/video/ykx6NvkxIyg/v-deo.html

  • @manuelolvera812
    @manuelolvera812 6 років тому +6

    Excelente! Estoy emigrando de flash a HTML5, reaprendiendo para evitar plugsin, tu explicación es muy buena, gcs

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

    Gracias parcero por la informacion compartida. La aplique a mi proyecto, el cual quedo muchisimo mejor presentado con este efecto.

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

      Genial brother, qué bueno que te haya servido. Saludos desde El Salvador hasta Colombia.

  • @vladimirrujano5507
    @vladimirrujano5507 6 років тому +3

    Felicitaciones, muy buen video. Continúe compartiendo tus conocimientos, eso ayuda a quienes estamos iniciándonos (en mi caso, como pasatiempo, estoy aprendiendo este tipo de programacion (de paginas web). Gracias

  • @jasuare0
    @jasuare0 4 роки тому +31

    En mi caso no me corrió bien el código del video.
    Sin embargo les dejo una alternativa que hice que si me funcionó, espero les sea de utilidad:
    +++++ CODIGO EN HTML5:


    Carrousel





    A


    A




    ++++++++++ En JAVASCRIPT:
    let imagenes = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg'];
    let contador = 0;
    function carrousel(direccion){
    let direccion1 = direccion;
    if(direccion1=='atras'){
    if(contador==0){
    document.getElementById('imagen').src= imagenes[imagenes.length-1];
    contador++;
    }else if (contador

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

      TE AMO

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

      Hola, no hay forma de conectar eso a mi base de datos de mysql?

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

      Gracias, Te amo x2!"

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

      weyyyy te amo :´v
      el tio T.Rex te ama , gracias 7u7

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

      weon, me has salvado la vida, no se de donde eres o donde estas pero gracias

  • @guildguaxi
    @guildguaxi 7 років тому +2

    Muchas gracias por el video, este te lo habia pedido yo pero hasta ahora lo veo, nuevamente muchas gracias : )

  • @rubenmontani7487
    @rubenmontani7487 21 день тому

    Lexter gracias por el video!! suscritp y like.
    Te cuento , deja si podes fijado otro mensaje porque en el video esta mal una etiqueta, queryselector("img), agarraste el id, no va a cambiar la img a muchos q no sepan de dom.

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

    en el css define la posicion de los botones atras, adelante?

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

    muy buen video, claro y conciso

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

    Me encanto muy bueno y me salió igualito, ¡GRACIAS! por compartir

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

    Muchas Gracias!!! consulta, que resolución tienen las imágenes?

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

    xq no suben el codigo

  • @cristianedwinmorannajera9926
    @cristianedwinmorannajera9926 5 років тому +11

    Se me queda en la primera imagen, alguien quien me ayude

  • @erickhilario6217
    @erickhilario6217 5 років тому +3

    Muy buen video!
    Solo comentarte que si prescindes del listener del documento y de la función el código funciona, por ende sería bueno quitarlos.

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

    Se puede hacerlo sin el css y el main??

  • @fabiocastagnola7541
    @fabiocastagnola7541 7 років тому +3

    hola hice lo mismo que hiciste para el carrousel estoy usando sublime text2 la versión gratuita, pero no me corren las animaciones de los botones ni las imágenes me podrías ayudar gracias

    • @LexterDev
      @LexterDev  7 років тому

      Te da algún error bro?

    • @fabiocastagnola7541
      @fabiocastagnola7541 7 років тому +1

      no simplemente no me corren las imagenes solo me aparece la primera

    • @LexterDev
      @LexterDev  7 років тому

      En la descripción del vídeo está mi correo. Puedes mostrarme el código por ahí para ver si hay errores.

    • @fabiocastagnola7541
      @fabiocastagnola7541 7 років тому

      ya te escribí gracias

    • @alancisvasquez8160
      @alancisvasquez8160 5 років тому

      Me pasa lo mismo solamente me aparece la primera imagen pero las otras no se muestran

  • @anachavez4852
    @anachavez4852 5 років тому +3

    Me ayudo bastante!! Muchas gracias :D

    • @LexterDev
      @LexterDev  5 років тому +1

      Qué bueno :) Saludos. :D

  • @mikel3885
    @mikel3885 5 років тому +1

    no corren las imagenes dreamweiver me dice que es de un error que hay en el codigo de linea y en un validador web me dice que el error se encuentra en esta linea
    function carrusell(contenedor){
    * este es el error de linea de codigo* contenedor.addEventListener('click', e =>){

    let atras = contenedor.querySelector('.atras'),
    let adelante = contenedor.querySelector('.adelante'),
    img = contenedor.querySelector('img'),
    tgt = e.target;

    • @rubenmontani7487
      @rubenmontani7487 21 день тому

      hola mikel, el error esta en el querySelector("img) es en verdad querySelectorByID("imagen) o el valor de id=" " que le pusiste en el html, por eso no te corre por que no te permite seleccionar ese elemento html en javascript.

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

    Lo veo en este 2021 y si me funciona, muy bueno con lo de Js

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

      Pasa el código, a mí no me funciona (-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩___-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩)

  • @Banhiii
    @Banhiii 5 років тому +7

    no funciona tu tutorial esta editado

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

    Amigo tu vídeo en UA-cam se ve bien pero al descargar no se ve bien, lo descargue en formato 720 y no se ven bien símbolos, los else, los de mayor menor no se ven. Pienso que x el color de vscode y nose visualiza bien. Ehchale un ojo....

  • @Enzo-dp5xo
    @Enzo-dp5xo 3 роки тому

    buen video, pero yo puse un icono envés de los , y cuando apretó arriba de ellos no funciona , solo cuando aprieto en el contenedor de el icono, como puedo solucionarlo?

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

    Buenas noches. Estoy usando React y no sé cómo llevar ese código de JavaScript. Ayuda, por favor.

    • @rubenmontani7487
      @rubenmontani7487 21 день тому

      react es un framework de javascript, podes usarlo, poenete un componente y usalo tranqui.

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

    muy bueno man me emocione cuando me salio

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

      Haha Qué bueno bro, así se aprende. Espero te sirva para seguir aprendiendo. Un saludo 🫡

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

    Alguien podría indicarme cómo hacer que las imágenes pasen de forma aleatoria concluyendo con la primer carta?¿?

  • @mrmunioz539
    @mrmunioz539 7 років тому

    De lo mejor...!! Como siempre!!!
    Bro.. te escribi en tu pagina.. necesito una pequeña ayuda plocs...
    Excelente video.. Saludos!!!

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

    yo copie todo exacto a esto pero se me queda en la misma imagen
    alguien me dice si esta bien la ruta o la función
    uso draemwever en la linea 6 me sale error cuando ingreso "e"

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

      En tu navegador, revisa la consola para ver si te muestra algún error.

    • @rubenmontani7487
      @rubenmontani7487 21 день тому

      revisa el queryselector de img, cambialo a querySelectorById y el nombre que le pusiste a la etiqueta img en el id

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

    Banda publico el codigo?

  • @pablo-oc8im
    @pablo-oc8im 6 років тому +1

    No añades ningun evento al html. Por ejemplo eso, ya que es una cosa basica.

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

    Excelente video mil gracias

  • @harifangel5864
    @harifangel5864 6 років тому

    Se puede poner el id en vez de la clase como identificador a la hora de llamarlo en el archivo javascript?

    • @LexterDev
      @LexterDev  6 років тому

      Igual, document.querySelector('#idElemento')

  • @shandikizz
    @shandikizz 7 років тому

    Todo correcto, gracias y saludos.----- PSD: las imágenes deben tener mas-menos las dimensiones similares.

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

    Hola, muy bueno el código. Cómo puedo hacer para que funcione en modo celular?

  • @davidvazquezdelacruz7656
    @davidvazquezdelacruz7656 5 років тому

    bro como lo hago responsive

  • @charllothmoreira7322
    @charllothmoreira7322 5 років тому

    Pode usar transition?

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

    no funciona ese código 2022

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

    Buena explicacion se entiende bien, pero tengo una duda, como podria hacer un slider con imagenes que esten en una base de datos mysql, podrias hacer un video explicandolo?

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

      ¿Las imágenes en sí guardadas en una base de datos o son las URL's las que están en la base de datos?

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

      @@LexterDev son las url, en la base de datos solo guardo la direccion de las imagenes, las imagenes estan en una carpeta aparte

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

      Entiendo. Pues lo que debes haces es sacar las imágenes de la BD con tu lenguaje de Backend, y obtener un array que puedas manipular con JS, y así puedes hacerlo como quieres.

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

      @@gabrielalvarez5307 hola, por si acaso te salió?

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

      @@sergioachon4196 si me salio pero m costo hacerlo, pero ahora trato de colocarle la descripcion de cada imagen pero en esas estoy

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

    pienso que deberías pasar el código ya que muchos nos equivocamos :,v así podremos rectificar mas facil... :) saludos

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

      El código fuente de todos mis vídeos está en mi Patreon bro.
      www.patreon.com/LexterXPS

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

      @@LexterDev No logro encontrar los codigos:( No se si no tenga agregados, pero tampoco me permite la suscripcion

  • @izrael-wp5wq
    @izrael-wp5wq 3 роки тому

    sabes como podría hacer que se pasen en automatico las imágenes ósea en manual y automatico con setInterval, despues de carrusel(); declaro setInterval(carrusel,2000), no me arroja errores pero no pasa nada despues de los 2s, sabes como puedo hacerlo sin tener que dividir la funcion de carrusel :L, saludos.

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

      Puedes revisar en mi canal, tengo un vídeo haciendo un carrusel automático parecido a este.

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

    Gracias totales!!

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

      Con gusto bro, un saludo 👋

  • @forverlanguagecenter
    @forverlanguagecenter 5 років тому

    me apoyas para insertar un carrusel en una landingpage con instapage por favor

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

    Me confunde el hecho de que le agregaste el click al parámetro de la función y no a los botones de atras y adelante

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

      Es fácil, así evitas tener que agregar un evento a cada botón, sólo usas uno, y con ese trabajas con ambos botones de una vez.

  • @ivansiachoque
    @ivansiachoque 6 років тому

    Gracias, funcionó muy bien.

    • @LexterDev
      @LexterDev  6 років тому

      Genial bro, me alegro. Saludos!

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

    No funciona puedes dejar el codigo?

  • @robertosaldi2009
    @robertosaldi2009 7 років тому

    Lamentablemente no me funciona. Las flechas aparecen sobre la imagen 1 y no dentro de ella como para poder clickearla.

    • @LexterDev
      @LexterDev  7 років тому

      Eso se debe arreglar con css, si copiaste el que mostré en el vídeo debe funcionar.

    • @happycaos9677
      @happycaos9677 6 років тому

      Se debe a esta parte del codigo yo tambie tuve ese problema
      *{
      margin: 0;
      padding: 0;
      outline: 0;
      box-sizing: border-box;
      }
      html{
      font-family: Arial, sans-serif;
      }
      img{
      width: 100%;
      height: 100%;
      }
      .contenedor{
      width: 100%;
      position: relative;
      height: 780px;
      }
      .botones{
      font-size: 30px;
      width: 70px;
      height: 70px;
      line-height: 70px;
      border-radius: 50%;
      background-color: rgba(0,0,0,.7);
      text-align: center;
      font-weight: bold;
      position:absolute;
      color: #fff;
      box-shadow: 0 0 10px rgba(255,255,255,.6);
      -webkit-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      }
      .botones:hover{
      cursor: pointer;
      transform: scale(1.2,1.2);
      }
      .atras{
      left: 2%;
      top: calc(50% - 70px);
      }
      .adelante{
      right: 2%;
      top: calc(50% - 70px);
      }

    • @ronaldagamaescobedo3980
      @ronaldagamaescobedo3980 5 років тому

      @@happycaos9677 exactamente a que parte del código amigo?

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

      @@ronaldagamaescobedo3980 x2

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

    Hice todo al pie de la letra y no me funciono :(

  • @luishernandez-bb2lq
    @luishernandez-bb2lq 5 років тому

    Como lo haces automatico.

    • @LexterDev
      @LexterDev  5 років тому

      Basta con que uses un setInterval() para poder ejecutar lo mismo pero cada cierto tiempo.

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

    Parece que estuviera editado el tutorial, porque con el mero código no da igual, hay que arreglar el css de los botones y el código java scrip no mueve las imágenes.

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

      Pues si lees los comentarios abajo, a la gran mayoría sí les ha funcionado. El código del vídeo es cómo trabaja, no hay nada oculto. Si tienes problemas y/o dudas, puedes escribirme a mi Facebook (link en la descripción), y con gusto puedo ayudarte.

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

      @@LexterDev hola a mi me sale un error en la linea 5 que es este ('click', e =>) especificamente el simbolo = que sera???

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

      Creo que es todo lo contrario, la mayoría dice que no les funciona, pocos son los que si les funciona y es porque lograron editarlo.

  • @Oxikendo
    @Oxikendo 5 років тому

    pasen el fuente

  • @nomarpimentel1817
    @nomarpimentel1817 5 років тому

    siguiendo la idea logre hacer casi lo mismo pero se cambia la imagen dependiendo del numero que se toque: ejemplo 1 2 3 4... etc solo falta hacerle el cambio automático :D
    no se mucho de js pero e estado antes con código, no se si esto que e echo para js ete bien.
    var c_btn = document.getElementById("boton");
    var c_img = document.getElementById('imagenes');
    var _btns = c_btn.querySelectorAll('.item');
    var _img = c_img.querySelector('.img');
    c_btn.addEventListener('click',(e)=>{
    for(var x=0 ;x < _btns.length;x++){
    if(_btns[x] == e.target){
    _img.src=('/img/img'+e.target.innerHTML+'.jpg')
    }
    }
    });

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

    Muy bueno el video

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

      Gracias bro! Espero te haya servido. Un saludo.

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

      @@LexterDev Debes de tratar de explicarte un poquito mas y simplicar mas tu codigo

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

      Claro, siempre estoy abierto al feedback para seguir mejorando. Lo tendré en cuenta sin duda.

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

      @@LexterDev Ok sigue asi brother

  • @brandonalonso1688
    @brandonalonso1688 5 років тому

    muy buen video gracias

  • @danielr9065
    @danielr9065 5 років тому

    Guapo, todo perfes!!!!!!

  • @luisamariaperezmartinez
    @luisamariaperezmartinez 5 років тому

    Tengo algunos errores con el código, ayuda. ):

    • @LexterDev
      @LexterDev  5 років тому

      Hola. Puedes escribirme un inbox a mi página de Facebook, link en la descripción. Allá puedo ayudarte mejor. :)

  • @jorgeernestopradaantia7398
    @jorgeernestopradaantia7398 6 років тому

    El codigo está muy largo lo puedes suprimir mas

  • @Nina-ql7xu
    @Nina-ql7xu 2 роки тому

    Gracias!

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

    GENIAL :D !!

  • @mauricioborquez1069
    @mauricioborquez1069 6 років тому

    Necesito de nuevo tu ayuda; te envié un correo otra vez ojala me puedas ayudar

  • @jorgeernestopradaantia7398
    @jorgeernestopradaantia7398 6 років тому +1

    Debes mejorar un poco la manera de programar para que seas mas eficiente

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

    debería dejar los codigos en la descripcion del video, a mucho no les funcionó

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

      Mientras sigan el tutorial, no tiene porqué fallar.

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

      @@LexterDev x2 habia un error :c

  • @mauricioborquez1069
    @mauricioborquez1069 6 років тому

    necesitooooo tu ayuda te envie un mensaje a tu correo porfavor te lo agradeceria mucho

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

    Pésimo tutorial, nomás no funciona. Lexter si de verdad te consideras un conocedor en programación, ¿porqué no hacer otro que de verdad funcione?

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

      Entiendo tu observación brother, el vídeo funciona, al menos es lo que la mayoría dice, sin embargo, entiendo que sí hay varios detalles que pueden ser mejor elaborados. Es por eso que ya tengo 2 vídeos más relacionados con este tema de un slider/carrusel de imágenes: 1 - ua-cam.com/video/SSPdr2jHtIs/v-deo.html y 2 - ua-cam.com/video/ykx6NvkxIyg/v-deo.html
      Y si aún tienes problemas y/o dudas, estoy abierto a ayudarte sin problema. Un saludo.

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

      @@LexterDev Gracias por responderme, y pues voy a insistir, la única finalidad es comprender estos temas. Saludos.

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

      Claro, el vídeo está con la idea de ayudar y guiar para poder lograrlo. Como te digo, puedes escribirme sin ningún problema si necesitas ayuda, por este medio o por mis redes que están en la descripción del vídeo. Un saludo.

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

      @@LexterDev A la mayoría no nos funciona jajajajaja lea bien los comentarios

  • @MrReneyou
    @MrReneyou 7 років тому

    Código del Login :D

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

    No funciona

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

      Checa el vídeo con la versión actualizada y mejorada, está acá en el canal.

  • @pablo-oc8im
    @pablo-oc8im 6 років тому +1

    Muchos errores pero la base esta bien

    • @LexterDev
      @LexterDev  6 років тому

      ¿Muchos errores? ¿Cómo cuáles?

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

      Prácticamente hay que hacerlo nuevo, esta porquería no sirve

    • @izrael-wp5wq
      @izrael-wp5wq 3 роки тому

      no tiene ningún error, todo esta bien

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

    No funciona