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: ruclips.net/video/ykx6NvkxIyg/видео.html
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
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
Amigo tu vídeo en RUclips 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?
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.
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 - ruclips.net/video/SSPdr2jHtIs/видео.html y 2 - ruclips.net/video/ykx6NvkxIyg/видео.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.
![💙 Cómo hacer un slider en HTML y CSS [Código para copiar]](http://i.ytimg.com/vi/i9Yut6Dm9pI/mqdefault.jpg)
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: ruclips.net/video/ykx6NvkxIyg/видео.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
muy buen video, claro y conciso
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
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
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.
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!
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 el css define la posicion de los botones atras, adelante?
Muchas Gracias!!! consulta, que resolución tienen las imágenes?
Muchas gracias por el video, este te lo habia pedido yo pero hasta ahora lo veo, nuevamente muchas gracias : )
Saludos!
muy bueno man me emocione cuando me salio
Haha Qué bueno bro, así se aprende. Espero te sirva para seguir aprendiendo. Un saludo 🫡
Me ayudo bastante!! Muchas gracias :D
Qué bueno :) Saludos. :D
Lo veo en este 2021 y si me funciona, muy bueno con lo de Js
Pasa el código, a mí no me funciona (-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩___-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩)
Excelente video mil gracias
Se puede hacerlo sin el css y el main??
Gracias totales!!
Con gusto bro, un saludo 👋
Amigo tu vídeo en RUclips 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....
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
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?
Guapo, todo perfes!!!!!!
Guapo tu también!
Se me queda en la primera imagen, alguien quien me ayude
estara bien escrito el codigo de javascript? deberia de funcionar
@@gabrielalvarez5307 F
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
Todo correcto, gracias y saludos.----- PSD: las imágenes deben tener mas-menos las dimensiones similares.
xq no suben el codigo
Gracias!
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.
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.
muy buen video gracias
Banda publico el codigo?
Pode usar transition?
Hola, muy bueno el código. Cómo puedo hacer para que funcione en modo celular?
De lo mejor...!! Como siempre!!!
Bro.. te escribi en tu pagina.. necesito una pequeña ayuda plocs...
Excelente video.. Saludos!!!
Gracias, funcionó muy bien.
Genial bro, me alegro. Saludos!
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')
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 funciona puedes dejar el codigo?
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 ese código 2022
GENIAL :D !!
Alguien podría indicarme cómo hacer que las imágenes pasen de forma aleatoria concluyendo con la primer carta?¿?
bro como lo hago responsive
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.
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.
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.
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')
}
}
});
Hice todo al pie de la letra y no me funciono :(
no funciona tu tutorial esta editado
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
Como lo haces automatico.
Basta con que uses un setInterval() para poder ejecutar lo mismo pero cada cierto tiempo.
me apoyas para insertar un carrusel en una landingpage con instapage por favor
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. :)
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
necesitooooo tu ayuda te envie un mensaje a tu correo porfavor te lo agradeceria mucho
Código del Login :D
No funciona
Checa el vídeo con la versión actualizada y mejorada, está acá en el canal.
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
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 - ruclips.net/video/SSPdr2jHtIs/видео.html y 2 - ruclips.net/video/ykx6NvkxIyg/видео.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
No funciona