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
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
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
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.
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....
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;
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.
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
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?
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"
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?
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.
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.
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.
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.
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') } } });
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.
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.
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
no me funciono la animacion :T
Excelente! Estoy emigrando de flash a HTML5, reaprendiendo para evitar plugsin, tu explicación es muy buena, gcs
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
Dudo que te haya salido
Muchas gracias por el video, este te lo habia pedido yo pero hasta ahora lo veo, nuevamente muchas gracias : )
Saludos!
muy buen video, claro y conciso
Me encanto muy bueno y me salió igualito, ¡GRACIAS! por compartir
Gracias parcero por la informacion compartida. La aplique a mi proyecto, el cual quedo muchisimo mejor presentado con este efecto.
Genial brother, qué bueno que te haya servido. Saludos desde El Salvador hasta Colombia.
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
TE AMO
Hola, no hay forma de conectar eso a mi base de datos de mysql?
Gracias, Te amo x2!"
weyyyy te amo :´v
el tio T.Rex te ama , gracias 7u7
weon, me has salvado la vida, no se de donde eres o donde estas pero gracias
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.
Me ayudo bastante!! Muchas gracias :D
Qué bueno :) Saludos. :D
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....
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;
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.
Muchas Gracias!!! consulta, que resolución tienen las imágenes?
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
Te da algún error bro?
no simplemente no me corren las imagenes solo me aparece la primera
En la descripción del vídeo está mi correo. Puedes mostrarme el código por ahí para ver si hay errores.
ya te escribí gracias
Me pasa lo mismo solamente me aparece la primera imagen pero las otras no se muestran
Se me queda en la primera imagen, alguien quien me ayude
estara bien escrito el codigo de javascript? deberia de funcionar
@@gabrielalvarez5307 F
en el css define la posicion de los botones atras, adelante?
Excelente video mil gracias
Lo veo en este 2021 y si me funciona, muy bueno con lo de Js
Pasa el código, a mí no me funciona (-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩___-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩)
muy bueno man me emocione cuando me salio
Haha Qué bueno bro, así se aprende. Espero te sirva para seguir aprendiendo. Un saludo 🫡
xq no suben el codigo
De lo mejor...!! Como siempre!!!
Bro.. te escribi en tu pagina.. necesito una pequeña ayuda plocs...
Excelente video.. Saludos!!!
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.
Gracias totales!!
Con gusto bro, un saludo 👋
Buenas noches. Estoy usando React y no sé cómo llevar ese código de JavaScript. Ayuda, por favor.
react es un framework de javascript, podes usarlo, poenete un componente y usalo tranqui.
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?
Se puede hacerlo sin el css y el main??
Gracias, funcionó muy bien.
Genial bro, me alegro. Saludos!
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"
En tu navegador, revisa la consola para ver si te muestra algún error.
revisa el queryselector de img, cambialo a querySelectorById y el nombre que le pusiste a la etiqueta img en el id
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?
¿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?
@@LexterDev son las url, en la base de datos solo guardo la direccion de las imagenes, las imagenes estan en una carpeta aparte
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.
@@gabrielalvarez5307 hola, por si acaso te salió?
@@sergioachon4196 si me salio pero m costo hacerlo, pero ahora trato de colocarle la descripcion de cada imagen pero en esas estoy
No añades ningun evento al html. Por ejemplo eso, ya que es una cosa basica.
muy buen video gracias
Hola, muy bueno el código. Cómo puedo hacer para que funcione en modo celular?
Banda publico el codigo?
Se puede poner el id en vez de la clase como identificador a la hora de llamarlo en el archivo javascript?
Igual, document.querySelector('#idElemento')
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.
Puedes revisar en mi canal, tengo un vídeo haciendo un carrusel automático parecido a este.
Guapo, todo perfes!!!!!!
Guapo tu también!
GENIAL :D !!
Alguien podría indicarme cómo hacer que las imágenes pasen de forma aleatoria concluyendo con la primer carta?¿?
Todo correcto, gracias y saludos.----- PSD: las imágenes deben tener mas-menos las dimensiones similares.
Pode usar transition?
Gracias!
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.
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.
@@LexterDev hola a mi me sale un error en la linea 5 que es este ('click', e =>) especificamente el simbolo = que sera???
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.
no funciona ese código 2022
Lamentablemente no me funciona. Las flechas aparecen sobre la imagen 1 y no dentro de ella como para poder clickearla.
Eso se debe arreglar con css, si copiaste el que mostré en el vídeo debe funcionar.
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);
}
@@happycaos9677 exactamente a que parte del código amigo?
@@ronaldagamaescobedo3980 x2
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
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.
pienso que deberías pasar el código ya que muchos nos equivocamos :,v así podremos rectificar mas facil... :) saludos
El código fuente de todos mis vídeos está en mi Patreon bro.
www.patreon.com/LexterXPS
@@LexterDev No logro encontrar los codigos:( No se si no tenga agregados, pero tampoco me permite la suscripcion
No funciona puedes dejar el codigo?
Muy bueno el video
Gracias bro! Espero te haya servido. Un saludo.
@@LexterDev Debes de tratar de explicarte un poquito mas y simplicar mas tu codigo
Claro, siempre estoy abierto al feedback para seguir mejorando. Lo tendré en cuenta sin duda.
@@LexterDev Ok sigue asi brother
bro como lo hago responsive
Hice todo al pie de la letra y no me funciono :(
pasen el fuente
me apoyas para insertar un carrusel en una landingpage con instapage por favor
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')
}
}
});
Como lo haces automatico.
Basta con que uses un setInterval() para poder ejecutar lo mismo pero cada cierto tiempo.
Tengo algunos errores con el código, ayuda. ):
Hola. Puedes escribirme un inbox a mi página de Facebook, link en la descripción. Allá puedo ayudarte mejor. :)
El codigo está muy largo lo puedes suprimir mas
Debes mejorar un poco la manera de programar para que seas mas eficiente
debería dejar los codigos en la descripcion del video, a mucho no les funcionó
Mientras sigan el tutorial, no tiene porqué fallar.
@@LexterDev x2 habia un error :c
Necesito de nuevo tu ayuda; te envié un correo otra vez ojala me puedas ayudar
no funciona tu tutorial esta editado
Código del Login :D
necesitooooo tu ayuda te envie un mensaje a tu correo porfavor te lo agradeceria mucho
No funciona
Checa el vídeo con la versión actualizada y mejorada, está acá en el canal.
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?
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.
@@LexterDev Gracias por responderme, y pues voy a insistir, la única finalidad es comprender estos temas. Saludos.
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.
@@LexterDev A la mayoría no nos funciona jajajajaja lea bien los comentarios
Muchos errores pero la base esta bien
¿Muchos errores? ¿Cómo cuáles?
Prácticamente hay que hacerlo nuevo, esta porquería no sirve
no tiene ningún error, todo esta bien
No funciona