Como crear un Slider con Javascript sin plugin | Adaptable a dispositivos moviles 2024 Vanilla JS

[@AlexCGDesign]

¿Y tú hiciste el SlideShow, comentalo aquí abajo? ¡Cuéntamelo aquí abajo! Espero te haya servido el tutorial, si es así te invito a suscribirte Si tienes alguna duda puedes comentarlo aquí 👌 😎 🔥 Crea un portafolio animado: kzbin.info/www/bejne/bJamd6Bjm66Af5Y🔥

[@miguelhuamanormeno4714]

No sale en toda pantalla! Ni aun con el archivo que subiste.

[@AlexCGDesign]

Hola, claro o que debes hacer es que en el slider-contenedor, tenga un width: 100wh; y un height: 100vh;

[@AlexCGDesign]

Si tienes otras fallas, siéntete libre de mandarme mensaje a mi página de Facebook para aclarar las dudas, subí así el archivo para que se pudiera apreciar, pero si ocupa toda la pantalla el slider

[@armandodma6730]

Bro lo veo recién, amm al slide le puse texto encima y ya no me agarran las flechitas, como le hago?

[@lauraochoa96]

@@armandodma6730 No sé si sea el problema pero puedes intentar dándole a la clase direcciones la propiedad z-index : 5, para que se ponga por encima de todo.

[@brayandamianbarrioslopez4969]

Llevava bastante buscando un buen video, los otros no me sevian... gracias joven, ahora tengo mi slider.

[@moisescastillo3447]

buen video, continua haciendo estos videos con javascript puro que es como realmente se aprende a programar, con el lenguaje nativo puro y duro, desde ya se agradece el aporte.

[@designpenvoice]

Con permiso del autor del video, dejo las soluciones a los problemas que me topé durante el tutorial. ------------ "A pesar del #, la página sigue yéndose al inicio cuando presiono los botones del slider" [solución]: &#10094; &#10095; ------------ "Si presiono muchas veces el botón 'atrás', el 'adelante' funciona mal" [Solución]: if(n < 1){ indice = 1; } Saludos.

[@D00MED_]

Yo lo solucione poniendolo asi if (n < 1){ indice = slides.length; } Asi va para atras y para adelante sin problemas asi le des varias veces seguidas

[@miguelquintero5937]

y como solucionaste el problema que no deja poner a las imagenes enlaces a otras secciones ??

[@mprogramador63]

Gracias me ayudaste muchopara mi pagina web, fue el unico video que encontre que lo hacia bien Te ganaste un suscribtor mas😎😎😎😎

[@gl8459]

Muy buen video. Las flechas funcionaron raro pero con las barras fue suficiente.

[@henrymermachuctaya8342]

Gracias Alex por el video aprendí, mucho sin duda unos de los mejores programa para aprender muchas gracias

[@incrediweb]

Excelente! Le añadí animaciones con animate.css y queda un slider espectacular! Gracias crack!

[@sinnombre-zg9xq]

Gracias por compartir, tienes nuevo follower, yo tuve un pequeño problema con las direcciones, tuve que agregar una linea mas, pero quedo todo perfecto, si alguien tuvo el mismo error aqui esta mi solución. .direcciones { display: flex; width: 100%; height: 100%; position: absolute; top: 0; justify-content: space-between; align-items: center; justify-items: center; font-size: 50px; }

[@klaus1to]

Al fin encontré un vídeo así, MUCHAS GRACIAS POR EXISTIR!!!!!

[@brandonjosuemontes4307]

Es las primera vez que visito tu canal y se ve que tienes contenido muy bueno. Gracias por compartir tus conocimientos!

[@almgm6851]

Excelente!!! Pro fin un video con JS puro

[@jorgecoca1120]

Gracias amigo con tus video aprendo mucho sin duda unos de los mejores programa para aprender :D muchas gracia por tu contenido

[@yilmerumbo3178]

Excelente! Lo estaba buscando gracias por compartir tus conocimientos

[@giovanniguevaraherrera8312]

adoro tu código bro , te mereces mas likes y suscriptores

[@MiguelAngel-mf3yu]

puedes explicarmer para que sirbe inline block y block ? pero en terminos faciles con un ejemplo , gracias

[@elisiumcosmos7600]

Entonces la var indice es la ke va almacenando el numero de indice 0 ... Luego lo borra con none. Luego la condicion se vueve a cumplir y cambia nuevamente el indice ej.1....y asi sucivamente....luego la condicio ya no se cumple y vuelve a 0......y lo mismo paralelo. Con la clase active ....aqui esta reemplazando una clase por otra....estado...nada y estado active....sera eso no....?.....osra ke el bucle trabaja con set interval....no? Gracias.....me calienta el cerebro...divertido....felicitaciones ..carlos de tenerife ..

[@ICuantunRexI]

Buen video, consulta como hago para cuando ponga el mouse en una de las imagenes de slider se pause la transición y tmb si se le puede agregar una barra de tiempo de transición de cada imagen, gracias!

[@juanguillen9918]

muchísimas gracias

[@raulhernanromeroherrera2547]

Hola Alex, de Colombia, Bogotá, no soy desarrolador pero juego con los codigos, soy discapacitado y gracias a su curso de web Moderno entiendo html y css, en las transiciones no logro hacer transicion del aviso como el que usted tiene a qui en el segundo 40 de alex design, tiene un video sobre esa transicion con react?, gracias.

[@AlexanderRodriguez-xi9lq]

me Encanto tu video gracias

[@elisarojas5785]

ME ENCANTOOO!!! Muchísimas gracias

[@hermano_Juan]

Me salio casi todo bien el slide en si me funciona pero tengo un par de fallas la primera es que cuando le doy adelante o atras me sube al inicio de la pagina porque tengo un scroll en la pagina y cuando presiono para cambiar la imagen se sube el scroll al inicio de la pagina la otra es que el setInterval para cambio automatico de la imagen no me sirvio y escribi el codigo identico al del video =(

[@juancarlosyep7028]

muy buen contenido del video, me resulto de maravilla...gracias

[@Ariel.Terraza]

Hice exactamente lo mismo que el video y no me funciono. Debe haber alguna configuración en el programa de códigos que no me esta funcionando?

[@bryanc.369]

Excelente tutorial, un saludo! Sigue así!.

[@anthonyvelasquez3376]

Hola gran video, soy nuevo en tema de codigo, quisiera saber como se cambia las barras por circulos, saludos.

[@MiguelAngel-mf3yu]

al momento de dar click a la flechas no hace el cambio de imagen ,porque ?

[@nychu4]

Gracias . Necesito implementar varios sliders como ese en un grid de culumnas adaptables para que sea responsibe, sería genial un tutorial .

[@diegovera3230]

disculpa como se puede cambiar el efecto?, que las imagenes de deslicen de derecha a izquierda

[@jcv_042]

Hola, en el minuto 17:22 hay una función que se llama "@keyframes", solo cambias lo que él coloca dentro de ello, colocas con porcentajes. Te recomiendo ver el uso de keyframe para hacer sliders. Saludos.

[@alritmodtlatidos12]

Buen. Video Gracias por las explicaciones

[@juangabrielhernandezhernan2343]

Hola buenas tardes !! todo excelente.. Solo tengo un error en la primer linea del js "let indice = 1", a que se debe?

[@jhonnathanalvarez03]

Esta muy bien el slider, solo que cuando las imagen estan en 1 y intentas darle atras no funciona..... porque..?

[@EddHtl]

Por que en la edición hizo varios cambios que no mostró, antes del primer for de la ultima función tiene las clases que contienen las imagenes (se me olvidó el nombre pero el las llama "miSlider fade" el numero los agrega a una variable y les da el valor .lenght con parentesis al final así, .lenght(); lo modificó y no lo mostró, quitale los parentesis y con eso debe quedar el boton atrás) los weyes que nada más vienen a agradecer no es dificil adivinar que solo vienen a llevarse el código sin analizarlo y solo lo adapatan a sus trabajos como ratas, el código funciona pero la edición del video está mal, a mi la Automatización no me funciona... supongo que igual y es por propiedades block y porque no tiene animación cosas que no ocupé... si replicas todo tal cual posiblemente no te salgan errores.

[@eljirafo8812]

amigo cuando le pongo la almoadilla en los href me lleva al principio de la pagina, como hago para que se pase a la otra imagen?

[@Mordidaporlasviboras]

No me cambia las imágenes, los botones no funcionan. Veré si lo edito.

[@tetzaguicalvarado3976]

cuando pongo el script dejan de cargar las imágenes backgroud-images

[@crisdarcromero8022]

excelente, gracias. seria de gran ayuda si harias un curso de css completo.

[@jdyona]

grande que buen slider :)

[@mateodiaztecnotec]

Como se aria para mostrar más de 2 diapositiva a la ves

[@leostylepos549]

muy buen tuto... pd: deberias instalarte algunas extenciones para que tu codigo no se vea tan abtracto y tenga mas vida

[@oslar7126]

Hola buenas tengo un problema con el los scripts de tu slideshow. El funcionamiento es perfecto, pero a mi se me muestran las imágenes apiladas una encima de la otra todas a la vez, en lugar de ir alternándose. ¿Como puedo solucionar esto? Gracias

[@AlexCGDesign]

Tienes los archivos base del tutorial, para arreglar esto amigo :)

[@bylisan59]

Aunque hay errores menores que se pueden cometer y te rompen todo el codigo, se pueden solucionar con los archivos descargables. Muchas gracias!

[@alejandramolano5797]

Hola...Gracias por compartir tus conociemtos!!! Tengo una pregunta: porque usas let en vez de var cuando hacer el codigo en javascript? Gracias

[@AlexCGDesign]

Hola Alejandra, let limita su alcance al bloque de ejecución en la que se encuentre y var limita su ámbito a la función en la que se define o al ámbito global, usar let nos permitirá resolver problemas con el HOISTING, Aunque si deseas podrás seguir utilizando var. Saludos

[@carloseduardogragedaflores9787]

Hola, muy buen video tus diseños son facinantes, y tus explicaciones excelentes bueno , tengo una pregunta estoy intentando agregar el slider a una pagina, para un trabajo del instuto, pero me surge un problema que si cambio el nombre de la imagen, por otro diferente al que tienes en la guia por ejemplo: tu imagen pone : "1 (1)" , en mi proyecto tengo : "vol1 ", y no funciona alguna solucion, o me pudes explicar cual es la necesidad de poner: "rutaImagen/nombre (1)" el numero entre (), muchas gracias, tus videos me han ayudado mucho a la hora de realizar este tipo de proyectos y tambien han despertado la poca creatividad que tengo, excelentes videos.

[@crauch_6996]

Hola buenas, como puedo hacer para que las imagenes dentro del slider me redireccionen a otras paginas o html? Gracias

[@miguelquintero5937]

hola, lograste resolverlo ??, yo tambien estuve buscando cómo y ese slider no deja redireccionar

[@renzovilchez2105]

me encantó, aún así tengo un error ya que cuando pongo dos sliders o más ya no funciona igual tiene errores :(, alguien me podría ayudar?

[@mindyleon9467]

Hola, muy buen video, estuve probando .. pero tengo problemas cada vez que presiono atraz oh adelante me sale un error "Uncaught ReferenceError: avanzaSlide is not defined at HTMLAnchorElement.onclick " , quisiera saber porque please

[@carolinagajardo1211]

Holaa... me da el mismo error ...Lo pudiste resolver?

[@mindyleon9467]

@@carolinagajardo1211 hola si, porque estaba usando webpack. El alcanze no lo permitía. Pruébalo dentro de html, y verifica si te funciona ahí, con el onclick. Pero si usas dentro de javascript no funciona puedes hacerlo con el addEventListener.

[@desk6173]

buenardo bro

[@carlosbeltran2754]

Gracias

[@AlexCGDesign]

De nada Carlos, esperamos verte pronto en el canal.

[@ConscienciaDespierta33]

Hola amigo , me sirvió muchas gracias por tu tiempo , tenia una pregunta para hacerte , a la hora de ver el responsive , mis imágenes se borran cuando hago chico el cuadro , como podría hacer que se adapten a mi slider ? Gracias ! likee

[@eduardocuadra6681]

una consulta a mi si me funciona el sliedr pero quiero poner un menu encima del slider como podria hacer.

[@AlexCGDesign]

¿como que encima?

[@AlexCGDesign]

Tienes los archivos base para comparar el código amigo, saludos

[@EddHtl]

A mi no funciona tu código, hiciste modificaciones que cambiaste en la edición y no se ven

[@izrael-wp5wq]

jaja tambien me di cuenta, pero en el console del navegador puedes resolverlo.

[@fernandoestrada6795]

Buenas noches, muchas gracias por el tutorial lo hice y me funciono bastante bien, lo unico que he estado probando insertar un link y no me funciona, me puedes ayudar?, gracias...

[@renzovilchez2105]

lo llegaste a modificar?

[@miguelquintero5937]

@@emmanuelantonioazocaralvar8375 como asi ??

[@Rogeltelo-tw8wj]

Que significa apachurrar?

[@axelosvaldo1343]

¿Como hago para que la imagen final no se regrese a la primera?

[@designpenvoice]

Probando, lo logré así: if(n > slides.length){ indice = slides.length; } Saludos.

[@axelosvaldo1343]

@@designpenvoice ¡Muchas gracias! Si me funciono

[@Ven2see]

exelente

[@antoniohuamanpuentes7730]

Retroceder no funciona

[@nychu4]

No puedo creer que en ningún lugar expliquen como hacer un grid de varios sliders