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
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!
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
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.
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 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;
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!!!
@@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.
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.
Hace unos meses publique este ejemplo, aquí uso bxslider ruclips.net/video/Q7rJPuq4nuI/видео.html para que se inicie como me comentas tan solo tienes que agregarle la opcion: infiniteLoop: true y eso seria todo :D
¡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!
![Quando Rondo - Grow Up [Official Music Video]](http://i.ytimg.com/vi/8zFnCg3BO4Q/mqdefault.jpg)
Muchas gracias por el video, explicas mejor que mi profesor. Suerte con el canal Exitos . GRACIAS....
amigo, me salvaste el trabajo de la facultad. Toma todo mi maldito like
Excelente, entendible y sencillo. Por allí hay muuuchos que dicen funcionar y es pérdida de tiempo.
Oyeeeeee, muchisimas gracias. Estoy aprendiendo Javascript, a veces me confundo y batallo muchisimo encontrando ayuda. De corazon mil gracias!!!!
pana fue la mejor explicación de el slideshow con js, gracias ....
explicas demasiado bien te mereces ser famoso
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
Un dios enseñando a hacer un slider.
Miles de gracias, directo, sencillo y bien explicado, me ha ayudado mucho!!
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!
@@heavytetal con css
@@geraldmc1939 Al final use JavaScript y me quedo genial, saludos !
@@heavytetal mejor
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
Muy buen tutorial!
espectacular, gracias
jajajaja la voz de fazt en este video... acostumbrado a la voz actual...
me falto que pusieras flechitas para hacerlo manual y una transicion, pero al menos me llevo algo de lo que necesitaba saber
muy bueno estimado, se puede aplicar si el proyecto esta realizado en react?? muchas gracias
Me ha encantado la solución! gracias
¡Excelente!
El MEJOR Video =) LIKE
Gracias por esto....fantástico...
Gracias, me ayudó mucho!
Hola, super bueno el video, una pregunta, tienes algun video que expliques como hacer un slideshow con Jquery? Gracias !
Rapido y conciso 👍
Le hace honor al nombre de su canal.
gracias y soloamente gracias
bien fazito
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.
Muy buen video tendras uno de imagenes con video
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?
Tienes algun curso completo de javaScript desde cero ?
Muy buena explicación, una duda alguien sabe como agregar links a las imagenes del slider ???
muy bueno!
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?
Chamo explicas bastante bien!
Hola, me muestra este error que no me permite cargar la imagen Uncaught TypeError: Cannot set property 'src' of undefined
at window.addEventListener
Tu propriedade SRC está com algo errado em JS
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.
mmh y para que al iniciar no inicie en blanco, sino de frente una imagen?
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
Excelente video muy entendible la enseñanza hermano( {fazt} ), mi pregunta es ¿Por qué no se cargaron las 4 imágenes solamente 3 ?
porque en la condicional if esta declarado cuando "i
@@nelson0632 muchas gracias hermano por la aclaración, le agregue 3 en vez de 2 y ahora si me funciona perfecto.
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
hola saludos ya te funciona o necesitas ayuda
@@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;
Aiuda para centrarlo?
what frameworks do you use to do web pages?
hice los mismo pero no funciono lo hice con visual estudio code.
o es por que este video fue de hace 5 años?
hola funciona
Si tienes 30 imágenes, ¿tienes que escribir la línea del array 30 veces?
basta con poner un for
cuando pongo como cabecera el carrusel cuand voy a otra pagina ya no funciona
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!!!
lo resolviste?
como hago si las imagenes son de diferentes tamaños?
Edita com Photoshop
@@guilhermequintino8951 what Xd, tienes que darle el valor general a las imagenes, puedes usar css para eso Xd dizque photoshop Xd
@@AkelonKawaii Sou desenvolvedor Web, eu sei aumentar tanto com vh, px e %. Só não entendo espanhol, xD.
@@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.
@@AkelonKawaii Quer me ensinar mais?
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.
Hace unos meses publique este ejemplo, aquí uso bxslider ruclips.net/video/Q7rJPuq4nuI/видео.html para que se inicie como me comentas tan solo tienes que agregarle la opcion: infiniteLoop: true
y eso seria todo :D
:O !! voy a revisarlo!! muchas gracias!!! te comento cualquier cosa!!
Se puede usar ese codigo pero usando un div??
podes poner las img en un div
agregale botoncitos, caption y efectos de barras paralelas o cuadritos :D
¡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!
q bien, esperare el video y buen video el actual :)
Y el video? :,v
@@FaztTech y el vidio :'v
@@FaztTech Vaya que tardas :p
Muy buena explicación!!! :)