Slider manual y automático infinito con HTML, CSS Javascript puro

[@maytearenal7206]

Profesor, es que le entiendo todo a la primera. Usted es de los contadísimos profesores que se nota que disfruta dando clases. Lástima que no haya más así. ¡¡¡ GRACIAS, GRACIAS, GRACIAS !!!

[@davidm.8835]

Excelente! Has vuelto a hacer magia! Me parece una gran idea actualizar los tutoriales que utilizaban JQuery por puro vanilla JS. 👏🏻👏🏻

[@christiancamachogalvis7027]

Parce, qué agradable su forma de explicar, se nota demasiado el cariño por el código, la facilidad de transmitir información. ¡Un grande! Saludos desde Colombia.

[@jarinsonhurtado1414]

Siempre digo que eres el mejor, gracias por compartir ese mar de conocimientos. Saludos desde Cali, Colombia.

[@marceloparajo1228]

Muy útil, muy didáctico y muy fácil de implementar. La explicación paso a paso excelente y clarísima. Todos los profesores deberían ser así. Felicitaciones.

[@jonathanc2261]

El unico video que encontre, que explique de manera tan dinamica, lo haga de forma sencilla sin iconos, bootstrap, y un monton de cosas extras innecesarias, excelente video mi hermano lo felicito

[@JuanOrtegaortegadesign]

He seguido todos tus pasos y... me ha salido!! eres genial!! tenía otros sliders con javascript pero no funcionaban correctamente porque entraban en conflicto con el menú desplegable de mi página web. Muchas gracias por tu ayuda!

[@rodrigogalvan3598]

Eres el mejor, tus explicaciones son muy adecuadas además de minuciosas, muy entendible y a pesar de ser un vídeo largo no es nada cansado, muchas gracias por hacer lo que haces! Saludos desde México, Puebla.

[@sebastianmoyano7313]

Sinceramente con el tremendo canal que tenés ya deberías tener mínimo 500k de suscriptores....éxitos amigo gracias por el contenido!!

[@eduardo20481]

es por que no mucha Gente esta interesada en esto la Gente esta mas en tic tic ahora

[@eduardomegoguevara3181]

@@eduardo20481 el Eduardo verso😳😳

[@felipep9526]

ni lo he visto todavía pero sé que es un excelente video, saludos!

[@elisiumcosmos7600]

Te felicito....por fin lo entiendo....es oro para mi....y muy bien explicado....mill..de gracias......aqui luchando con js.....gracias profesor...

[@nardosys]

como no encontré este canal antes!!!!! estoy aprendiendo diseño web y la verdad que sos un genio. saludos desde Argentina!!

[@kevincueva4419]

me encanta que trabajen sin librerías, gracias profesor estaré atento a todos sus vídeos

[@davidavellaneda133]

WOOOOOOOOOOW, que video tan bueno, muy bien explicado y de una manera sencilla, felicitaciones y muchísimas gracias. Saludos desde Bogotá, Colombia

[@nairdesantiago2364]

Forma de enseñar más paciente y estructurada que he encontrado. Gracias infinitas.

[@kntfps]

Pero qué calidad de profesor porfavooooor! Gracias! Muy buena explicación y muy buen proyecto, el plus de automatizarlo al final me dejo atónito!! Ya estaba pensando como lo iba a hacer por mi cuenta jajaja 😄

[@Eyssrvjoo]

acabo de terminar el modulo de FCC de javascript, y por casualidad vi este video, lo estoy haciendo para ir aprendiendo, explicas increible, se nota la pasion que tienes, y lo mejor es que toda mi atencion se dirige al contenido, cosa que normalmente no me pasa.

[@ezequielgarcia4609]

Muy buenas, excelente tutorial, hace poco descubrí este canal, ya que también me dedico a crear páginas web pero la programación, y quise empezar a a profundizar en css la parte diseño. La verdad que me gusta seguir canal de webs y otros, y este es uno de los pocos que son realmente útil para aprender. Tengo seleccionados los mejores y este entra en la lista de cabeza. Además pide ver el último directo, la pena la diferencia de hora porque me hubiese gustado participar, pero muy bueno también. Muchas gracias por el esfuerzo y compartir. Un saludo desde España.

[@RominaOrtega-m5k]

Muy bueno, acabo de entender muchas cosas con sólo un vídeo!!! GRANDE!!!!

[@angelwilliamsavilaarauco]

Vengo de ver muchos videos donde solo muestran como se hace, contigo entendí lo que hacía. ¡Gracias!!!

[@camilo.s2237]

❤❤❤ nunca pensé amar a un hombre a la distancia! ❤❤❤ gracias por este mar de conocimientos 🙌🏻🙌🏻🙌🏻

[@jesusrsalomc6061]

Realmente te Felicito por compartir tus conocimientos y ser muy claro en tus explicaciones, sigue así, dejando conocimientos

[@elrafineitorxd5400]

qué buena explicación. He hecho varios sliders pero no se me había ocurrido esta solución, grande.

[@torinoone5749]

Muchisimas gracias en serio, no solamente explicas bien y serio de forma calmada, sino que se entiende todo.

[@oztrocryptos]

increíble explicación! muy agradecido llevo años sin programar y quiero volver hacerlo :)

buah!!! eres un crack!!! llevo como 8 horas buscando algo asi, hasta que te encontre, me he suscrito a tu canal, muchas gracias :)

[@claudio20347]

¡¡NECESITO LIKES MÁS GRANDES!! ;) Enhorabuena por tu trabajo, eres el mejor. Un saludo desde España.

[@juanRCoder]

magnifico muy buena enseñanza gracias :)saludos

[@mariaarandaiglesias983]

¡Qué bien explicado! ¡Muchas gracias! ¡Saludos desde España!

[@giancarloshipolito915]

Buenas noches Gian carlo muchas gracias por tu aporte , si pude realizarlo y funciona perfecto, que tengas mucha salud y bendiciones , muchas gracias en serio.

[@danielcardenas1810]

gracias a este video como principiante en desarrollo web pude sacar adelante un proyecto ,un gran video y un excelente canal

[@garciacalvillovictoralfred8538]

Increíble hermano, te la rifaste, eres un grande bro. Nos has dado una gran heramienta hermano :3

[@andrewblocke_]

Impecable la manera de explicar y hacerse entender. Muchas gracias 😃

[@abrahamsanabria9491]

Gracias bro!! agregue este slider a uno de mis proyectos de practica y me funciono a la perfección!

[@javiervarela8189]

gracias, me la pase buscando muchas librerías para hacer un slider, pero gracias a tu video ya entendí su concepto.

[@seica5561]

Excelente video. La explicación estuvo clara y el código limpio. Me funciono perfectamente en la aplicación que estoy realizando.. Muchas gracias. Saludos desde Venezuela (08/05/2021)

[@MusicayHumor]

muchas gracias genio, explicas muy bien y sos uno de los pocos youtuber que explica bien y haciendo las paginas, la mayoria de youtuber explican flexbox y temas complejos usando de ejemplo simples cajitas con colores, pero vos haces la paginas literal y eso se agradece

[@Edy_vega6]

Infinitamente agradecido con vos por este material !

[@camiloalonsohernandezcedie1989]

no he terminado el video, pero que belleza de contenido, y de comunidad, mi hermano muchas gracias por su aporte a este movimiento! y quisiera econtrarlo algun dia y estrellarle un pico en esa frente jajaja un abrazo ! bendiciones y prosperidad para ti

[@normanejm]

ASOMBROSO!!! Es tan genial el efecto que me emocioné... jajjaaa Gracias, Excelente vídeo... 💪💪💪

[@luisarmandocheccllomantari9776]

excelente amigo, siempre se aprende con todos tus videos

[@cesartejada7196]

Me gustan muchos tus videos y muy bien explicados. Algunos de ellos los estoy utilizando en el proyecto que estoy creando para ir aprendiendo... muchas gracias por compartir todos tus conocimientos. Este video del Slider, también lo voy a utilizar en mi proyecto.

[@zigssmachine8546]

Un Crack total, Me sirvió mucho este tutorial Saludos desde Argentina

[@marianorojo_]

Buenísimo, muchisimas gracias por el aporte. Me costo pero pude crearlo! Saludos!

[@animelordk8890]

Buen video la verdad, me gusto y me funciono para mi pagina web que estoy haciendo desde cero. Muchas gracias!

[@micanal5533]

Brutal Tutorial , Saludos desde Puerto Rico!

[@northerndark5950]

Eres un maestro bro, es lo que buscaba, Dios te bendiga con más contenido y suscriptores

[@leomax522]

Muy bueno profe, la verdad que está muy bien explicado y muy sencillo. Gracias.

[@danielchavez5514]

Excelente video, seguí todos los pasos y me tomé mis pausas para entender. Funcionando muy bien en 2021

[@iAmLuaz-]

Nah sin palabras, excelente explicación y tutorial muchas gracias!!!

[@gallomolina]

Gracias, muy buen tutorial, manteniendo el slider en lo básico para que cada uno luego le de los estilos que necesite

[@darwinsanchez1055]

Muy genial ME ENCANTÓ, nuevo suscriptor, espero aprender más con tus vídeos, sigue adelante SALUDOS...

[@subnormalynx9634]

Que buen tutorial, lo implemente en un slider para un tienda y quedo de diez esa idea para el Front-End

[@ivansebastiannunez9953]

Excelente aporte a la comunidad. Espero que tu canal siga creciendo. Éxitos!

[@WilsonRestrepo0271]

Hola hoy aprendí muchas cosas nuevas gracias por compartir tus conocimientos, espero que continues subiendo nuevos vídeos relacionados con javascript. saludos desde Medellin Colombia

[@joseescobar5419]

Muchísimas gracias por este aporte. Es oro puro. Bendiciones para ti y que tengas mucho más éxito 😊🤘🏻

[@edgarsegura2288]

Gracias, desde hace bastante tiempo estaba buscando algún tutorial que explicara como hacer la parte de JavaScript (sin usar librerías claro) y cuando menos me lo espero subes un video y explicas esa parte donde estaba confundido, Mil Gracias

[@arielcastillo7925]

Recomienod chicos, que a la hora de toca el boton, le pongan un display="none" y luego del setTimeout un display block. Por que si tocas muchas veces el boton se bugea. En cambia si lo desabilitas en el cambio y luego lo habilitas evitas eso. (hay que atraer el querySelector del boton) MUCHAS GRACIAS POR EL VIDEO PROFE!!!

[@isaif5859]

Podrías pasar el ejemplo de como se miraría en el código, no entiendo muy bien como colocarlo, si no lo tienes podría pasártelo para que lo edites, por favor :C ?

[@hatszo4168]

compalta ejemplo

[@Jygproyectosweb]

No

[@hatszo4168]

@@Jygproyectosweb :,v

[@juanfranco7259]

Hermano que buena explicación. Se agradece contenido tan fácil de entender.

[@genecles]

Hola. Explicación clara y sencilla. Gracias por compartir este material. Saludos.

[@gabrielpindo1198]

Me encanto! muchas gracias! saludos desde Argentina

[@trianadevia1962]

Me encanta como explica! Muchas gracias!

[@pabloszomer]

Eres el mejor me motiva a seguir aprendiendo !! muchas gracias por tus videos

[@gemamartin5161]

Muchísimas gracias, era lo que necesitaba para mi proyecto .

[@lgsusgeek]

Me ayudó muchísimo profesor, estoy creando un proyecto web personal y su aporte fue de bastante ayuda, muchas gracias. 💚

[@profedavid5846]

Lo hice y me salió perfecto! Muchas gracias por tu generosidad!

[@ffallasq]

a mi no me funciono no tienes el codigo para revisar

[@profedavid5846]

@@ffallasq cómo estás? Cómo querés que te lo pase?

[@pilarmolnar888]

@@profedavid5846 hola !! seguis teniendo el codigo? Tengo un error tambien.

[@profedavid5846]

@@pilarmolnar888 hola. No me acuerdo. Reviso y te aviso.

[@pilarmolnar888]

@@profedavid5846 Muchas gracias !

[@meghanl3647]

Me encanta, la verdad es que tienes mucha paciencia para explicar , muchisimas gracias

[@leonardofarina264]

Gracias maestro! me salvaste la tarde!! Saludos desde Buenos Aires Argentina

[@manusilustrador5095]

Como siempre muy útil. Gracias por compartir tus conocimientos!!

[@joelalexandertrinidad4801]

Muchísimas gracias, excelente explicado y justo lo que necesitaba.

[@favio.romero]

Excelente tutorial! gracias por compartirlo! 👏👏👏

[@Karen-fy7mq]

Muchas gracias! Me ha sido muy util y practico, excelente resolución

[@gastoncadima1995]

Muchas gracias, hace tiempo que buscaba como hacer esto, sos un genio

[@lina_useche]

¡GENIO! Gracias por este tutorial, justo lo que necesitaba :)

[@elliotgaramendi]

¡Muy buen video! Muchas gracias :')

[@Z_k404]

muchas gracias profesor neta que me ayudo mucho saludos 💯

[@danitenconi]

Una vez más: Mil gracias Genio!!!

[@danieltehuacatl6006]

muchas gracias por tu apoyo, eres un buenazo explicando

[@israelsantandermendoza2145]

era justo lo que me hacía falta :D

[@juanjosevalladares5200]

Genial el video, la explicación y el resultado. Gracias por el tutorial.

[@gonzafalco7292]

Buen video! Buena explicación, muchas gracias.

[@edwinvalladares867]

Muchas gracias, excelente dando cátedra. Bendiciones

[@candreadiazs]

Muchas gracias por compartir tan valiosos conocimientos

[@elisiumcosmos7600]

Felicidades por tu trabajo ..con js....marstro....he replicado su codigo....y aqui en la biblioteca. No se mueve nada.....console dice....ke en el js la linea 7 esta sin definir....bueno mi pregunta es......lleva algo extra en el head...meta.... Content o algo mas...en el tipo de doctype.....mi apaarato es un mac....nav Firefox........me gusta solucionarlo....porque se entiende muy bien el scrip.......he aprendido mucho...gracias ...desde canarias..

[@facundodtd]

muchísimas gracias por este gran aporte, nuevo seguidor

[@Eggsec]

Gracias amigo necesitaba esto para mi hero section. Bueno subcriptor

[@JoseGarcia-fr4cp]

Grande crack!, muchas gracias por el contenido, aprendí bastante

[@elsoyboy3977]

muchas gracias!!!!! es justo lo que estaba buscando.

[@Marleto41]

Eres mi héroe, saludos.

[@williamsanchezlarrea6883]

No suelo dejar comentarios, Gran tutorial felicitaciones

[@aldomorales]

Excelente video!! me fue de mucha ayuda y espero que a otros también.

[@lionelprats9686]

Excelente. Muchas gracias por coompartir!!

[@loreanny0112]

Eres el mejor!! Sin duda

[@marcoslabat4908]

Muchas gracias hermano, me ayudaste un monton, nuevo sub

[@fernandodurigon295]

hola a todos los developers, pueden agregar mas sections al slide si al contenedor slide le ponen position absolute, y display flex, el width se va a ajustar automaticamente, pero hay que limitar los section con una medida exacta no relativa, y todo funcionaria igual, sin tener que modificar el width de el slide al agregar mas section

[@gilbertocantoral]

Por alguna razón, el slider no me funciona :(, ya verifique el código varias veces pero, no puedo ver el error

[@teveoenlaweb]

✔ Muchas gracias por excelente tutorial de como hacer Slider manual y automático ❤ todo esta muy claro y preciso.

[@jesuspontacrba7451]

Me parece muy interesante tu ejemplo. Gracias por compartir. Me gustaría que este (u otro proyecto) lo encapsularas en una clase para poder crear objetos de esta clase y poder por ejemplo crear varios sliders en una misma página sin tener problemas con el control del JS. Otra cosa que me gustaría es algún día ver un ejemplo de un slider vertical.

[@nataliaalfie5345]

Hola! al presionar los botones, no me funcionan. que hice mal??? segui paso a paso

[@jackapagueno]

Buen tutorial. La cuestión es que tiene un pequeño problema con la transición automática y es que cuando se hace click para atras o adelante con los botones manuales, la función automática no reinicia el contador de 5000ms y eso genera un problema. Si has pasado por ejemplo 2 imagenes con los botones en 3 segundos, la tercera imagen no se mantendrá 5 segundos para pasar a la cuarta imagen, sino que va almacenando el tiempo y solo demorará 2 segundos y eso se ve mal. Igualmete, cuando la pagina está cargada por vario rato, las ejecucion de javascript va almacenando el tiempo sin pasar las imagenes, y cuando vueles a la página las imagenes pasan una tras otra sin parar como recuperando el tiempo de inactividad que tuvo la página.

[@fabriciogomez8057]

buenas, lo resolviste?

[@wasted-police5125]

Oye ahorita que comentaste eso de 2 imagenes, ¿a ti no te sale un error de transicion cuando le das click a boton derecho?

[@oscarroberts6281]

hermoso trabajo. Un gran saludo desde argentina!