Carrusel automático con JavaScript 

Mis respetos, simple y conciso.

Muy buen tutorial, directo y sin vueltas! Nuevo sub!

Genial hermano, gracias por tu aporte. increible!!!

excelente tutorial directo y muy bien explicado. muchas gracias !!!

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

Este bro deberia tener 100k Sub es super bueno explicando

Perfección de tutorial, gracias 🔥

Hey me llega este video no hay mejor explicado como este, me llega brother😉

Excelente video!

muy buen tutorial amigo, me sirvió mucho!

Gracias eres un genio

Que buen video y bien explicado

Genio gracias !!!

excelente tutorial, ya solamente estudar los componentes de css y javascript

muchas gracias.. 👍🏻

BRO SOS UN MÁSTER

pa pa papap jjaj muuy buena!

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.

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

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

el ejercicio no funciona con tarjetas solo con imagenes

como hago para que me quede responsive?

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

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).

no entiendo porque no me funciona si estoy haciendo todo tal cual, ayuda porfa!!

👉🔔

en ves de const puedo usar var tambien ?

cual es la difrencia entre ponerle step = step *-1 y step = -1 , el -1 es para retroceder ? y el +1 , es para avanzar ?

Buenas noches como le hace para sacar el Scrollleft es una librería o diccionario?

cual es la diferencia entre query selector y classby

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?

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!

Hola felix , cuando le pongo al overflow-y: hidden; no vuelve mas el carrusel a que se puede deber este problema?

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

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

no funciona el desplazamiento automático en pantallas pequeñas..

Hola que tal, por que tengo este error Uncaught TypeError: Cannot read properties of null (reading 'scrollLeft')

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

tkmmmmm

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; }

hola, trate de poner dos carrusel en una sola pagina pero solo funciona uno sabes porque?

NO ME FUNCIONA Y ESO QEU HASTA ME DESCARGUE EL CODIGO DE GITGUB -> ALGO QUE ME AYUDE PORFA, GARCIAS

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

gracias mano, ahorras un culo de tiempo compartiendo el codigo

Como haria para agregarle.una transicion con JavaScript , cada ves que avanza cada imagen y El cambio no SE tan brusco

yo tengo un problema y es que el carrusel se me va a la derecha y no se centra. Porque sera?

cual es la diferencia de ponerle (){} y ()=>{} ?? y let y const y no entiendi muy bien esto step = step * -1; , podrias volver a explicaer

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

no me funciona el código

contexto : que mas¡?

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)

no me funciona el código