ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- En este vídeo te voy a mostrar cómo poder hacer un Slider o Carrousel de Imágenes usando Vanilla JS y HTML5. Sucríbete para más vídeos como éste. :)
-------------------------------------------------------------------------------------------
Sígueme en Facebook:
/ xpstutoriales
E - mail: xtremetuts@gmail.com
No olvides dejar tu Like y compartir para seguir creciendo. :)
![[Watch Party] RoV Pro League 2024 Winter | with Moowan ( Bacon Time Vs Talon )](http://i.ytimg.com/vi/CCEDhu6dPN8/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: th-cam.com/video/ykx6NvkxIyg/w-d-xo.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
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
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!
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
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.
Me ayudo bastante!! Muchas gracias :D
Qué bueno :) Saludos. :D
Se me queda en la primera imagen, alguien quien me ayude
estara bien escrito el codigo de javascript? deberia de funcionar
@@gabrielalvarez5307 F
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;
Excelente video mil gracias
De lo mejor...!! Como siempre!!!
Bro.. te escribi en tu pagina.. necesito una pequeña ayuda plocs...
Excelente video.. Saludos!!!
Gracias totales!!
Con gusto bro, un saludo 👋
Lo veo en este 2021 y si me funciona, muy bueno con lo de Js
Pasa el código, a mí no me funciona (-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩___-̩̩̩-̩̩̩-̩̩̩-̩̩̩-̩̩̩)
en el css define la posicion de los botones atras, adelante?
xq no suben el codigo
Muchas Gracias!!! consulta, que resolución tienen las imágenes?
muy bueno man me emocione cuando me salio
Haha Qué bueno bro, así se aprende. Espero te sirva para seguir aprendiendo. Un saludo 🫡
Banda publico el codigo?
Buenas noches. Estoy usando React y no sé cómo llevar ese código de JavaScript. Ayuda, por favor.
Amigo tu vídeo en TH-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....
Gracias, funcionó muy bien.
Genial bro, me alegro. Saludos!
Se puede hacerlo sin el css y el main??
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
no funciona tu tutorial esta editado
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?
muy buen video gracias
No añades ningun evento al html. Por ejemplo eso, ya que es una cosa basica.
no funciona ese código 2022
Guapo, todo perfes!!!!!!
Guapo tu también!
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
GENIAL :D !!
Gracias!
Todo correcto, gracias y saludos.----- PSD: las imágenes deben tener mas-menos las dimensiones similares.
Pode usar transition?
Alguien podría indicarme cómo hacer que las imágenes pasen de forma aleatoria concluyendo con la primer carta?¿?
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')
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.
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
Hola, muy bueno el código. Cómo puedo hacer para que funcione en modo celular?
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.
Hice todo al pie de la letra y no me funciono :(
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 apoyas para insertar un carrusel en una landingpage con instapage por favor
No funciona
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
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
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
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
Como lo haces automatico.
Basta con que uses un setInterval() para poder ejecutar lo mismo pero cada cierto tiempo.
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. :)
Necesito de nuevo tu ayuda; te envié un correo otra vez ojala me puedas ayudar
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
necesitooooo tu ayuda te envie un mensaje a tu correo porfavor te lo agradeceria mucho
Código del Login :D
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 - th-cam.com/video/SSPdr2jHtIs/w-d-xo.html y 2 - th-cam.com/video/ykx6NvkxIyg/w-d-xo.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
Checa el vídeo con la versión actualizada y mejorada, está acá en el canal.