Carrusel automático con JavaScript
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Hola, este video aprenderemos ha hacer un carrusel automático con JavaScript de forma sencilla !!
✅ Prueba el resultado:
felixgonzalo.g...
✅ Código en GitHub:
github.com/Fel...
✅ Más ejercicios:
• Ejercicios con HTML, C...
👉 Facebook:
/ felixcastro003
Mis respetos, simple y conciso.
Muy buen tutorial, directo y sin vueltas! Nuevo sub!
Este bro deberia tener 100k Sub es super bueno explicando
Hermano profe....muy bn explicado..es el unico tuto donde puedo manejar mas fotos y algunos efectos y todo lo adicional funciona perfectamente con lo explicado en el tutorial...Gracias
excelente tutorial directo y muy bien explicado. muchas gracias !!!
Genial hermano, gracias por tu aporte. increible!!!
Gracias eres un genio
BRO SOS UN MÁSTER
Hey me llega este video no hay mejor explicado como este, me llega brother😉
muchas gracias.. 👍🏻
excelente tutorial, ya solamente estudar los componentes de css y javascript
Que buen video y bien explicado
Excelente video!
Genio gracias !!!
pa pa papap jjaj muuy buena!
Perfección de tutorial, gracias 🔥
muy buen tutorial amigo, me sirvió mucho!
excelente video, muchas gracias. aunque tengo un pequeño problema no se si a alguien mas le pasa, el carrusel me funciona bien en todos los navegadores pero en chrome no, solo se mueve de derecha a izquierda pero no se devuelve, agradezco me pueda colaborar
bro porque en movil se pierde el efecto automatico y se me queda congelado
Tengo un problema, y es que el carrusel no se adapta a diferentes dispositivos, en emulador para celular se muestra y hace la funcion de ir y devolverse, pero en pc no.
el ejercicio no funciona con tarjetas solo con imagenes
Hola! Muy bueno tu video! me pasa que cuando llega al final, no vuelve. Entiendo que es porque no se cumplen la condicion evaluada en el if. Sabes como puede debuggearlo? entiendo que tengo que chequear los anchos de los contenedores. Saludos
me pasa lo mismo , y aun no encuentro la solución
👉🔔
no entiendo porque no me funciona si estoy haciendo todo tal cual, ayuda porfa!!
en ves de const puedo usar var tambien ?
es buena practica usar const o let en vez de var para las variables, const para variables que no cambiar de valor y let para aquellos que cambian su valor, saludos !!
cual es la diferencia de ponerle (){} y ()=>{} ?? y let y const y no entiendi muy bien esto step = step * -1; , podrias volver a explicaer
Te recomiendo investigar que son funciones de flecha o arrow functions en JS, básicamente es otra forma de crear una función. Por otro lado la característica más relevante entre const y let, es que const no permite que cambies su valor (pero hay una excepciones por ejemplo cuando asignas un arreglo como const puedes cambiar sus valores). y está instrucción step = step * -1 lo utilizo para cambiar el signo del valor a positivo o negativo según el caso. Sigue practicando, investigando y preguntando, todo paso a paso !! saludos 🤓 !!
@@FelixCastro003 aya automaticamente lo cambia el step ? al multiplicarlo?
@@MiguelAngel-mf3yu correcto, cambia el signo del step, recuerda que si es positivo va para un lado y si es negativo para el otro. Se realiza de esa forma para que puedas cambiar el valor del step fácilmente, el step puedes verlo como la distancia que se mueve el carrusel, si es positivo va para adelante y si es negativo para atrás.
Felix Castro Que tal hermano sta chvere tu carousel automático; pero necesito saber: Como hago para cuando el escrool llegue a su limite y se reinicie nuevamente el intervalo y que empiece de nuevamnente el carousel valga la redundancia como empezo(Osea que no regrese si no que sea infinito su movimiento como está allí de manera horizontal).
Lograste resolverlo?
que debo aprender para saber todas esas funcionaes y las de javascript ? ya que en los cursosde javascript no enseñan eso , solo lo de siempre , hacer una compracion de edad , etec
Cuando se está aprendiendo e iniciando es necesario desarrollar tu lógica de programación y eso lo podrías hacer con ejercicios donde solo se utilice JS y un archivo html para ver los resultados en consola. En este caso las funciones que mencionas son para trabajar ya más orientado a resultados para páginas o sistemas web. Tienes que practicar HTML CSS y Javascript en conjunto e intentar no usar librerías para que veas como se podrían hacer paso a paso ciertos componentes como un carrusel, cada que necesitas hacer algo o tienes dudas búscalo en documentación !! Es parte dela rutina y el aprendizaje saludos !!
@@FelixCastro003 gracias crack
Hola me gustó mucho el slider, es justo lo que estaba buscando, pero me sucede que cuando pon scroll-behavior: smooth el carrusel deja de funcionar y la página deja de hacer scroll por completo, que puede ser? Muchas gracias!
En el contenedor de las imágenes cambia el scroll behavior por none
Y deja para el body normal en smooth
no funciona el desplazamiento automático en pantallas pequeñas..
cual es la diferencia entre query selector y classby
Hola, queryselector te permite obtener un elemento html por una clase o por su ID, tienes que especificar un punto . para clases y # para ID. El otro solo te permite obtener el elemento mediante su clase y ya no es necesario poner el punto.
Hola Felix, gracias por tu tutorial, muy bueno. Me puedes ayudar? Al crear mi carrusel me bloquea los enlaces del menú en dispositivos mobiles. En navegadores no pasa, solo me afecta en dispositivos mobiles. Los enlaces me llevan a diferentes secciones de mi pagina por medio de ID´s. No logro resolverlo. Hay algo en tu ccodigo que los bloquea en celulares
como hago para que me quede responsive?
NO ME FUNCIONA Y ESO QEU HASTA ME DESCARGUE EL CODIGO DE GITGUB -> ALGO QUE ME AYUDE PORFA, GARCIAS
no me funciona el código
tkmmmmm
Hola que tal, por que tengo este error Uncaught TypeError: Cannot read properties of null (reading 'scrollLeft')
Hola, ese error indica que el objeto del que se quiere obtener el scrollLeft es nulo o no dispone de dicha propiedad
Hola felix , cuando le pongo al overflow-y: hidden; no vuelve mas el carrusel a que se puede deber este problema?
lo quise aramr con grid, capas ahi esta algo mal
.body{
display: grid;
gap:2px;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1670px;
grid-template-rows: 100px 800px 100px;
}
trate de hacer mi propio scripts , pero al momento de pasar el mouse y luego salir se vuelve loco y comienza a avanzar rapidito , esta mal ejectuado y escrito mi script verdad? hice como el tuyo y no tuve problema al soltar el mouse y ponerlo , funcionaba correctamente
Analiza bien tu código, como me indicas que se vuelve loco aumentando la velocidad podría ser por qué estás creando varios intervalos y eso ocasiona errores ya que cada intervalo funciona de forma asíncrona !! Saludos
Como haria para agregarle.una transicion con JavaScript , cada ves que avanza cada imagen y El cambio no SE tan brusco
hola, si te refieres al efecto de agrandar la imagen puedes hacer la animación más suave con CSS agregando por ejemplo transition: 0.5s
@@FelixCastro003 no responde , no hace nada , cuando agrego Al css transition 2s all
cual es la difrencia entre ponerle step = step *-1 y step = -1 , el -1 es para retroceder ? y el +1 , es para avanzar ?
Hola, cuando es positivo el scroll avanza y cuando es negativo regresa a la posición inicial. Ahora la idea de colocar la multiplicación es hacer que el step sea dinámico con la posibilidad de avanzar no solo en 1, por ejemplo podrías colocar el step en 20 y verás que el scroll avanza más rápido y ya con la multiplicación tienes -20 para retroceder
yo tengo un problema y es que el carrusel se me va a la derecha y no se centra. Porque sera?
Es un caso de ancho y márgenes a los lados
Hola buenas tardes muy bueno el carrusel automatico, He revisado mi codigo varias veces y esta tal cual, pero por alguna razón al llegar al final del scroll no se devuelve, sabes a que se deba, ya hice los cambios que recomendo de cambiar === por >= pero sige igual
if (carrusel.scrollLeft >= maxScrollLeft) {
step = step *-1;
} else if (carrusel.scrollLeft === 0) {
step = step *-1;
}
Buenas noches como le hace para sacar el Scrollleft es una librería o diccionario?
Hola, es una propiedad que ya está integrado en el lenguaje, aquí explican más sobre scrollLeft: developer.mozilla.org/es/docs/Web/API/Element/scrollLeft y aquí hay más propiedades y métodos: developer.mozilla.org/es/docs/Web/API/Element
gracias mano, ahorras un culo de tiempo compartiendo el codigo
hola, trate de poner dos carrusel en una sola pagina pero solo funciona uno sabes porque?
Ese error me imagino es porque solo hiciste una copia del código HTML sin tener en cuenta el código de JS, lo que pasa es que en JS usamos el método querySelector y hacemos referencia a un solo elemento (carrusel) mediante su clase. Si deseas tener varios carruseles debes de cambiar un poco la lógica. Podrías crear diferentes clases como carrusel-items1, carrusel-items2 y hacer que ejecute el mismo algoritmo del carrusel o también podrías usar querySelectorAll para obtener un array de los elementos con la clase carrusel-items y aplicarle a todos ellos la misma lógica del carrusel. Saludos !!
Tengo un problema con el script, unos días estubo funcionando bien , pero luego de otros días, entre a la página y no podía hacer scroll, se movía lentizimo al bajar, casi nada bajaba la página ,. Sabes cuál podría ser el error?
Hmm, tendría que analizar tu página, pero en este caso el código del carrusel no afecta el scroll vertical, pero tal vez tienes otro código js que si está afectando. Lo que no termino de entender es porque después de un tiempo te funciona con errores, para esto es bueno que manejes Git y módulos para el codigo JS si es que tienes muchas líneas
Creo q la explicación es fácil: Si presentas con un:
let maxScroll = carousel.scrollWidth - carousel.clientWidth
console.log(carousel.scrollWidth)
// 2100
// console.log(carousel.clientWidth)
// 1343
La Resta es así=
2100 - 1343 = 768
Bueno en mi Laptop me salen esas medidas(del corei3)
console.log(maxScroll)
// 768
Entonces el maximo en reccorrer el scroll de izquiera a dereach es medida de 768.
PERO PARA QUE LLEGE A LOS 768 TIENE QUE MANDARLO A CORRER CON ESTE CÓDIGO:
carousel.scrollLeft = carousel.scrollLeft + step
Bueno cuando ya recorre y llega a su fin o sea a su máximo viene la pregunta o condición:
carousel.scroolLeft === maxScroll osea si (768 === 768)
como es verdad hace que retroceda la barra del scroll como ya recorrió de izquiera a derecha ahora tiene que regresar o retroceder de derecha a izquierda.
pero lo hace diciéndole que retorceda a ladito del 1 en positivo de la barra del scroll(y eso quiere decir que retrocede)
Es decir que el estep tiene un valor de:
1 en posiivo(step=1)
hace el cálculo:
step= step * -1 => Por que lo hace retroceder por que todo numero diferente se resta si multiplicas 1 X -1 Te queda menos
-1
y Para hacerlo vuelta que avance preguntas así:
Recuerda que cuando termina la primera condición continua el flujo de ejecución y pregunta:
Y finalmente cuanto le pregunta si llegó hasta cero por creo que los q pasa del menos -1 están considerados o tienen un valor de 0.
carousel.scrollLeft === 0 (Como llegó a su valor negativo y se cumple la condición)
step= step * -1 (Pero recordemos que estep ya tra un valor que tiene -1)
Y la ley de los signos sognos iguales se suma y cambia el valor.
quedando así 1 (positivo) cosa que allí lo hace avanzar al scroll de izquierda a derecha hasta que llegue hasta los 768 (Bueno en mi Laptop tengo esas medidas)
A la izquierda negativo -768 ....... -8 -7 -6 -5 -4 -3 -2 -1 | 2 3 4 5 6 7 8 ...... 768 (A la derecha posiivo).
Y solo llega la barra de regreso hasta el menos osea aladito del 1 en positivo.
(y)
Hola buenas tardes, He revisado mi codigo varias veces y esta tal cual, pero por alguna razón al llegar al final del scroll no se devuelve, sabes a que se deba
Ese error se presenta en algunos navegadores y pantallas. Para solucionarlo cambias la primera condición de la función start() con un mayor o igual (>=) en lugar de igual estricto (===)
if (carousel.scrollLeft >= maxScrollLeft) {
step = step * -1;
} else if (carousel.scrollLeft === 0) {
step = step * -1;
}
@@danielpintos6486 hice los cambios que indicas pero parece trabado el carrusel está entre la izquierda y derecha pero como si fuera unos pixeles
Es curioso por que en el celular se ve bien el scroll es infinito pero en PC tiene un limite y se queda a media imagen no regresa en su totalidad
podrias decirme como moficiar el step para que en cada movimiento enfoque imagen por imagen ? gracias o se mueva de 3 imagenes en 3 imagenes gracias
hola, para el cambio que mencionas puedes realizarlo primero modificando el step a un valor más grande acorde al ancho de tu imagen, si la image mide 300px puedes probar con un
step = 300
Luego tienes que modificar la duración del intervalo, modificar el valor de 10 por uno más alto, puedes colocarlo que se mueva cada segundo con el valor de 1000
Si deseas que se mueva de 3 en 3 entonces el step debe ser igual al ancho total y modificar el tiempo del intervalo para que el efecto se vea adecuado
@@FelixCastro003 GRACIAS . COMO HAGO PARA AGREGARLE UN EFECTO DE TRANSION ?
@@MiguelAngel-mf3yu puedes hacer diferentes efectos con @keyframes en CSS
contexto : que mas¡?
no me funciona el código