Cómo Hacer SlideShow con Javascript, Desde Cero

[@CarlosEmilioCabreraCastañeda]

Muchas gracias por el video, explicas mejor que mi profesor. Suerte con el canal Exitos . GRACIAS....

[@ximealna6288]

Oyeeeeee, muchisimas gracias. Estoy aprendiendo Javascript, a veces me confundo y batallo muchisimo encontrando ayuda. De corazon mil gracias!!!!

[@lauramartinez2075]

Excelente, entendible y sencillo. Por allí hay muuuchos que dicen funcionar y es pérdida de tiempo.

[@micavilladeamigo3244]

amigo, me salvaste el trabajo de la facultad. Toma todo mi maldito like

[@andrickgarcia6550]

pana fue la mejor explicación de el slideshow con js, gracias ....

[@keylamendez3305]

hola amigo... muy buena explicación... solo que te faltó al agregar la otra imagen cambiar en la pregunta de indiceImagenes < 2 colocar 3... para que se puedan ver las cuatro imágenes

[@5bcuaresmaretuertoluisdavi724]

explicas demasiado bien te mereces ser famoso

[@geraldmc1939]

Un dios enseñando a hacer un slider.

[@luispocodetodo]

Excelente estimado, realizar un slide desde cero ayuda a aumentar nuestra lógica, aparte tengo un tema con un slide con el que estoy recién trabajando en angular, el nombre de la librería se llama Swiperjs, y tengo el inconveniente, cuando lo llamo en múltiples instancias para mostrar mas de 50, el slide de izquierda o derecha se ralentiza, pienso que la mejor opción es realizarlo desde 0 para personalizar el comportamiento. Y que mejor opción que empezar como lo estas planteando, buen aporte

[@heavytetal]

Miles de gracias, directo, sencillo y bien explicado, me ha ayudado mucho!!

[@heavytetal]

Y por casualidad sabrías como conseguir que las fotos hicieran transiciones entre y otra? Me he vuelto loco buscando info y no he encontrado nada, gracias de antemano amigo!

[@geraldmc1939]

@@heavytetal con css

[@heavytetal]

@@geraldmc1939 Al final use JavaScript y me quedo genial, saludos !

[@geraldmc1939]

@@heavytetal mejor

[@lourdesmiranda6206]

Muy buen tutorial!

[@cfaluotico]

muy bueno estimado, se puede aplicar si el proyecto esta realizado en react?? muchas gracias

[@luis2864]

espectacular, gracias

[@palomadaza23]

Hola, super bueno el video, una pregunta, tienes algun video que expliques como hacer un slideshow con Jquery? Gracias !

[@cmvargas]

jajajaja la voz de fazt en este video... acostumbrado a la voz actual...

[@marinopablo3391]

Me ha encantado la solución! gracias

[@principeabel]

El MEJOR Video =) LIKE

[@11desaparecido]

me falto que pusieras flechitas para hacerlo manual y una transicion, pero al menos me llevo algo de lo que necesitaba saber

[@nelsonsanchez4789]

Gracias por esto....fantástico...

[@lachinu]

Gracias, me ayudó mucho!

[@georgecodreanu6096]

¡Excelente!

[@alfredoserrada4014]

Rapido y conciso 👍

[@geraldmc1939]

Le hace honor al nombre de su canal.

[@carlossoto9942]

Si quiero repetir eso es varias imagenes tengo que repetir el codigo?o hay una forma de que el código no sea tan largo?

[@tumpiur2303]

Tienes algun curso completo de javaScript desde cero ?

[@sirSyluxzero]

gracias y soloamente gracias

[@tercermundistalatino1624]

hice los mismo pero no funciono lo hice con visual estudio code. o es por que este video fue de hace 5 años?

[@jordimayer1308]

Excelente video muy entendible la enseñanza hermano( {fazt} ), mi pregunta es ¿Por qué no se cargaron las 4 imágenes solamente 3 ?

[@nelson0632]

porque en la condicional if esta declarado cuando "i

[@jordimayer1308]

@@nelson0632 muchas gracias hermano por la aclaración, le agregue 3 en vez de 2 y ahora si me funciona perfecto.

[@gc6545]

Hola Fazt, cuando utilizó el script no me carga las imagenes, a qué es debido. Y no tiendo porque con document.slider accedes al TagName, del img, no tendrías que usar "document.getElementsByName("slider");" o se puede acceder a cualquier name de etiqueta con ".". Te dejó el código script: window.addEventListener('load', function (){ var imagenes = []; imagenes[0] = 'slider/slider0.jpg'; imagenes[1] = 'slider/slider1.jpg'; imagenes[2] = 'slider/slider2.jpg'; imagenes[3] = 'slider/slider3.jpg'; var indiceImagenes = 0; var tiempo = 1500; function cambiarImagenes() { document.slider.src = imagenes[indiceImagenes]; if (indiceImagenes < 3) { indiceImagenes++; } else { indiceImagenes = 0; } setInterval(cambiarImagenes, tiempo); } }); Lo revisé y no entiendo por qué no funciona. Saludos

[@josealbertocarballorojas4461]

hola saludos ya te funciona o necesitas ayuda

[@gc6545]

@@josealbertocarballorojas4461 Sí, gracias por interesarte. Saludos. Este es el código que funciona: var i = 0; // Start Point var images = []; // Images Array var time = 3000; // Time Between Switch // Image List images[0] = ""; images[1] = ""; images[2] = ""; images[3] = ""; // Change Image function changeImg(){ document.slide.src = images[i]; // Check If Index Is Under Max if(i < images.length - 1){ // Add 1 to Index i++; } else { // Reset Back To O i = 0; } // Run function every x seconds setTimeout("changeImg()", time); } // Run function when page loads window.onload=changeImg;

[@ChrisJosJC]

yo no se mucho de Javascript, asi que lo que hice para que al principio de la carga, no me apareciera en blanco le puse src en el html y ya.

[@williammoran3921]

bien fazito

[@dezmacht1]

Chamo explicas bastante bien!

[@AlejandroCordoba73]

Muy buen video tendras uno de imagenes con video

[@mariocarnival]

Si tienes 30 imágenes, ¿tienes que escribir la línea del array 30 veces?

[@brianrutgeranccoflores1278]

basta con poner un for

[@alexdeclercq9881]

muy bueno!

[@gonzaloallwin]

Como le puedo poner algún tiempo en el cambio de la foto para que no sea tan bruto, tan de repente el cambio de una foto a otra?

[@jeurycorporan]

Se puede usar ese codigo pero usando un div??

[@90andresramos]

Muy buena explicación, una duda alguien sabe como agregar links a las imagenes del slider ???

[@MrFenoma]

Hola Gracias por el tutorial! He estado buscando Sliders que permitan usar imágenes y videos y que el video se inicie de forma automática. Una vez que termina el video, pasa al siguiente slide y así en un loop. Lamentablemente, no he encontrado algo que me sirva. Tienes algún dato de cómo hacerlo? Gracias! saludos.

[@FaztTech]

Hace unos meses publique este ejemplo, aquí uso bxslider kzbin.info/www/bejne/h2jVe4Orppmhq6s para que se inicie como me comentas tan solo tienes que agregarle la opcion: infiniteLoop: true y eso seria todo :D

[@MrFenoma]

:O !! voy a revisarlo!! muchas gracias!!! te comento cualquier cosa!!

[@MrFenoma]

Hola, estuve revisando el plugin y después de algunos ajustes, funciona, pero necesito armar una función que permita dar play sólo al video que se está mostrando y pausar el resto. A su vez, cuando el video termina salte al siguiente video y le de play y así de forma infinita. Buscando en internet encontré una función que permite saltar al siguiente video una vez finaliza el que está mostrando, pero como no logro pausar los otros, el siguiente video no se muestra desde el principio. var bx = $('.bx').bxSlider({ video: true, useCSS: false, nextText: '', prevText: '', mode:'fade', infiniteLoop:true, onSliderLoad:function(currentIndex){ $("video").trigger("play"); }, }); //Each .vid... $('.vid').each(function(i) { //This is the regular vanilla 'this'.(optional/required for next function) var self = this; //Click on the video element to play or pause.(optional) $(this).on('click', function() { (self.paused) ? self.play(): self.pause(); }); //When this video ends, go to next slide $(this).on('ended', function() { bx.goToNextSlide(); if ('currentIndex'). }); }); Disculpa pegar el código acá, pero ¿Se te ocurre alguna forma de resolverlo? Gracias!!!

[@AlejandroCordoba73]

lo resolviste?

[@agustinvalori9589]

Alguien me da una mano como hago para cambiar las imagenes desde dos botones uno que vaya a la derecha y otro a la izquierda ya que si crep una funcion que cambie el index del arreglo no se actualiza en la pagina la imagen sale apareciendo la misma.

[@MsDetodo1poco]

what frameworks do you use to do web pages?

[@tiagoviezzoli9375]

Hola, me muestra este error que no me permite cargar la imagen Uncaught TypeError: Cannot set property 'src' of undefined at window.addEventListener

[@guilhermequintino8951]

Tu propriedade SRC está com algo errado em JS

[@brianrutgeranccoflores1278]

mmh y para que al iniciar no inicie en blanco, sino de frente una imagen?

[@GG-cq7nt]

me pasa lo mismo, pudiste resolverlo? si le pongo 10 segundos por ejemplo, tarda 10 segundos en blanco y despues recien ahi pasa a la primera imagen

[@maryhirasawaivanova4027]

Aiuda para centrarlo?

[@torentogamer]

cuando pongo como cabecera el carrusel cuand voy a otra pagina ya no funciona

[@gabrielamoncayozerga2214]

como hago si las imagenes son de diferentes tamaños?

[@guilhermequintino8951]

Edita com Photoshop

[@AkelonKawaii]

@@guilhermequintino8951 what Xd, tienes que darle el valor general a las imagenes, puedes usar css para eso Xd dizque photoshop Xd

[@guilhermequintino8951]

@@AkelonKawaii Sou desenvolvedor Web, eu sei aumentar tanto com vh, px e %. Só não entendo espanhol, xD.

[@guilhermequintino8951]

@@AkelonKawaii Vou lhe dar um tutorial de como editar imagens maiores com CSS, dependendo do slides ela vai ter que editar, o javascript pode ter sido feito de várias maneiras e se vc mecher na propriedade IMG no valor HEIGHT, vai distorcer a imagem, não adianta vc tentar falar algo que não tem convívio diário, as imagens dos slides tem que ter um tamanho PADRÃO. Ou vc edita no PHOTOSHOP ou você ignora é faz um serviço sujo esticando a imagem.

[@guilhermequintino8951]

@@AkelonKawaii Quer me ensinar mais?

[@jlhalcone]

agregale botoncitos, caption y efectos de barras paralelas o cuadritos :D

[@FaztTech]

¡Hola!, si lo tendré en cuenta, este fue ejemplo para ir practicando algo de javascript básico, pronto subiré un siider que funcione en una pagina de verdad, en un ejemplo que ya prepare :). Gracias por comentar. Saludos!

[@jlhalcone]

q bien, esperare el video y buen video el actual :)

[@GamesPCAnthonyGames]

Y el video? :,v

[@gustavoadolfovelazquezguer8934]

@@FaztTech y el vidio :'v

[@edmthecrew3796]

@@FaztTech Vaya que tardas :p

[@ladyanithnymphetaminefix4589]

Muy buena explicación!!! :)