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
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.
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
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
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.
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....
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?
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.
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"
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
muy buen video, claro y conciso
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.
Muchas gracias por el video, este te lo habia pedido yo pero hasta ahora lo veo, nuevamente muchas gracias : )
Saludos!
Me encanto muy bueno y me salió igualito, ¡GRACIAS! por compartir
Me ayudo bastante!! Muchas gracias :D
Qué bueno :) Saludos. :D
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.
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 🫡
Gracias totales!!
Con gusto bro, un saludo 👋
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.
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
De lo mejor...!! Como siempre!!!
Bro.. te escribi en tu pagina.. necesito una pequeña ayuda plocs...
Excelente video.. Saludos!!!
Muchas Gracias!!! consulta, que resolución tienen las imágenes?
en el css define la posicion de los botones atras, adelante?
GENIAL :D !!
Gracias, funcionó muy bien.
Genial bro, me alegro. Saludos!
Gracias!
muy buen video gracias
Se puede hacerlo sin el css y el main??
Se me queda en la primera imagen, alguien quien me ayude
estara bien escrito el codigo de javascript? deberia de funcionar
@@gabrielalvarez5307 F
Guapo, todo perfes!!!!!!
Guapo tu también!
Todo correcto, gracias y saludos.----- PSD: las imágenes deben tener mas-menos las dimensiones similares.
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
xq no suben 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
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.
No añades ningun evento al html. Por ejemplo eso, ya que es una cosa basica.
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....
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')
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?
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.
Banda publico el codigo?
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
Pode usar transition?
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 ese código 2022
Hola, muy bueno el código. Cómo puedo hacer para que funcione en modo celular?
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
no funciona tu tutorial esta editado
No funciona puedes dejar el codigo?
bro como lo hago responsive
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.
Alguien podría indicarme cómo hacer que las imágenes pasen de forma aleatoria concluyendo con la primer carta?¿?
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.
Como lo haces automatico.
Basta con que uses un setInterval() para poder ejecutar lo mismo pero cada cierto tiempo.
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
Hice todo al pie de la letra y no me funciono :(
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.
El codigo está muy largo lo puedes suprimir mas
pasen el fuente
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. :)
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')
}
}
});
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
Código del Login :D
Necesito de nuevo tu ayuda; te envié un correo otra vez ojala me puedas ayudar
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