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

Подписаться 125 тыс.

Просмотров 28 тыс.

50% 1

Aprende a como crear un SlidesShow con Javascript puro sin ningun plugin o framework, además es adaptable a dispositivos móviles.
👇👇👇Ver más👇👇👇
📣 ¿Necesitas un Hosting y Dominio? Utiliza el cupón "ALEXCG" hasta para un 90% de descuento en Hostinger.com.
ENTRA AQUÍ 👉 www.hostinger....
👨‍💻🎁 Aprende Diseño Web Desde Cero(Descuento) 👉 alexcgdesign.c...
📌 Links interesantes 📌
▶️ ¿Te gustó el vídeo? Suscribete aquí: www.youtube.co...
▶️ Descargar archivos base del tutorial: github.com/Ale...
▶️ Paleta de colores: flatuicolors.com/
🎥 Vídeos que te podrían gustar 🎥
▶️ Crea una página web desde 0: • Crea tu sitio web faci...
▶️ Crea una menú de navegación fijo(Adaptable a dispositivos móviles): • Cómo crear un menú de ...
▶️Aprende a hacer un preloader funcional: • Agregar Preloader a tu...
✉️ Redes sociales ✉️
▶️Facebook: goo.gl/7o77tx
▶️Linkedin: goo.gl/byCJnS
▶️Github: github.com/Ale...
Tags:
Como crear un Slideshow funcional | Como crear un Slideshow funcional | Como crear un Slideshow con Javascript sin plugin | Crea un Slideshow totalmente adaptable a dispositivos moviles

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@AlexCGDesign 6 лет назад

¿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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6eCFm-fIMI4.html🔥

@miguelhuamanormeno4714 6 лет назад

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

@AlexCGDesign 6 лет назад

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

@AlexCGDesign 6 лет назад

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 4 года назад

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

@lauraochoa96 4 года назад

@@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 2 года назад

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

@designpenvoice 3 года назад

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]: ❮ ❯ ------------ "Si presiono muchas veces el botón 'atrás', el 'adelante' funciona mal" [Solución]: if(n < 1){ indice = 1; } Saludos.

@D00MED_ 3 года назад

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 3 года назад

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

@moisescastillo3447 5 лет назад

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.

@sinnombre-zg9xq 4 года назад

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; }

@gl8459 3 года назад

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

@mprogramador63 3 года назад

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

@incrediweb 2 года назад

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

@brandonjosuemontes4307 4 года назад

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

@klaus1to 5 лет назад

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

@henrymermachuctaya8342 3 года назад

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

@almgm6851 4 года назад

Excelente!!! Pro fin un video con JS puro

@jorgecoca1120 3 года назад

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

@nychu4 2 года назад

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

@yilmerumbo3178 4 года назад

Excelente! Lo estaba buscando gracias por compartir tus conocimientos

@giovanniguevaraherrera8312 4 года назад

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

@juancarlosyep7028 5 лет назад

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

@AlexanderRodriguez-xi9lq 3 года назад

me Encanto tu video gracias

@juanguillen9918 3 года назад

muchísimas gracias

@crisdarcromero8022 6 лет назад

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

@bryanc.369 4 года назад

Excelente tutorial, un saludo! Sigue así!.

@elisiumcosmos7600 2 года назад

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 ..

@raulhernanromeroherrera2547 2 года назад

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.

@jdyona 3 года назад

grande que buen slider :)

@elisarojas5785 5 лет назад

ME ENCANTOOO!!! Muchísimas gracias

@alritmodtlatidos12 4 года назад

Buen. Video Gracias por las explicaciones

@MiguelAngel-mf3yu 3 года назад

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

@jhonnathanalvarez03 4 года назад

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

@EddHtl 3 года назад

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.

@leostylepos549 4 года назад

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

@Ariel.Terraza 2 года назад

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?

@desk6173 3 года назад

buenardo bro

@MiguelAngel-mf3yu 3 года назад

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

@anthonyvelasquez3376 3 года назад

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

@ICuantunRexI 3 года назад

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!

@Mordidaporlasviboras 3 года назад

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

@bylisan59 4 года назад

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

@carlosbeltran2754 4 года назад

Gracias

@AlexCGDesign 4 года назад

De nada Carlos, esperamos verte pronto en el canal.

@oslar7126 5 лет назад

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 5 лет назад

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

@diegovera3230 3 года назад

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

@jcv_042 3 года назад

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.

@juangabrielhernandezhernan2343 4 года назад

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

@tetzaguicalvarado3976 Год назад

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

@carloseduardogragedaflores9787 4 года назад

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.

@hermano_Juan 4 года назад

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 =(

@ConscienciaDespierta33 4 года назад

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

@eljirafo8812 3 года назад

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?

@alejandramolano5797 6 лет назад

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

@AlexCGDesign 6 лет назад

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

@fernandoestrada6795 4 года назад

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 3 года назад

lo llegaste a modificar?

@miguelquintero5937 3 года назад

@@emmanuelantonioazocaralvar8375 como asi ??

@renzovilchez2105 3 года назад

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?

@mateodiaztecnotec 4 года назад

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

@Ven2see 4 года назад

exelente

@EddHtl 3 года назад

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

@izrael-wp5wq 3 года назад

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

@mindyleon9467 4 года назад

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 4 года назад

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

@mindyleon9467 4 года назад

@@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.