Curso JavaScript: 98. DOM: Ejercicios Prácticos | Responsive Slider -

En este video de ejercicios del #DOM de #JavaScript te enseño a crear un carrusel de imágenes (#ResponsiveSlider).
💛 Aprende JavaScript aprendejavascr...
📖 Mis notas sobre JavaScript jonmircha.com/...
📖 Mis notas sobre ECMAScript jonmircha.com/...
📖 Mis notas sobre JavaScript Asíncrono jonmircha.com/...
📖 Mis notas sobre JSON jonmircha.com/...
📖 Mis notas sobre el DOM jonmircha.com/dom
📦 Códigos: github.com/jon...
🔔 Suscríbete al canal kzbin.info... 🤓
👉 Visita mi sitio web jonmircha.com/ 💻
🌮 ¿Me invítas un taco? www.paypal.me/...
🤲 Apóyame en Patreon / jonmircha
📫 Suscríbete a mi lista de correo tinyletter.com...

[@josuemedina6882]

En unas horas me darán la nota que saqué en el examen de admisión a la Universidad para estudiar Ingeniería en Software, estoy muy emocionado. Lo poco que puedo hacer es decir gracias por el momento y te prometo que cuando trabaje en este mundo de la programación web, te apoyaré monetariamente.

[@jonmircha]

😉🙌

[@evalaya3832]

gracias profesor ...estoy haciendo el curso de maquetación para poder mejorar ...y usted lo hace ver tan fácil y cuando uno se pone a practicar ...dios es cuando uno le tiembla las manos se tranca muchas pero muchas veces tiene que revisar los apuntes ...y después de todo un día medio logra hacer algo que se mueva ...de verdad que no tengo como agradecerle ...usted es un docente de los mejores ...porque hace ver que la programación es muy fácil...solo que hay que echarle ganas como dicen los mexicanos ....dios lo bendiga

[@jonmircha]

👋🏻😉

[@kanonflores0113]

Profe el nuevo ejercicio que nos dejó del scrollspy, usted que ya lo termino dejé me decirle que es un dios en la programación 😮

[@jonmircha]

😅

[@seica5561]

Jon.. Sabes que reviso otros cursos de javascript y el tuyo para mi concepto es el mejor. Estuve revisando tus videos de POO en javascript. y gracias por darme el origen de los prototipos, con esto ya entiendo mejor el DOM.. desde San Antonio de Los Altos, Estado Miranda. Venezuela (23/06/2020) hora venezolana 12:23pm

[@federicoraulmaciasaparicio1339]

Sí, la verdad es que los cursos de Jon son de los mejores. Explica bastante bien, los ejemplos son fáciles de entender y los ejercicios son bastante útiles e interesantes. También lo bueno es que siempre nos habla de recursos adicionales para consultar y consejos de buenas prácticas. De manera paralela estoy viendo el de nodejs y tampoco tiene desperdicio.

[@vegaimagen9075]

De acuerdo con ustedes,tiene una forma de ensen~ar que hacen que entendamos facilmente y tambien como dices Federico Raul macias , los tips o recursos adicionales

[@seica5561]

@@federicoraulmaciasaparicio1339 .. Muchas Gracias.. por el consejo de ver también el NOdeJS.. lo estaré revisando y poder realizar aplicaciones del lado del servidor..

[@ronalddavidhernandezpadill8182]

I have finished this exercise, I'm going to watch your solution now

[@jonmircha]

👋🏻😉

[@fd2195]

Jon que tal, un pequeñ aporte, para dejar los botones perfectamente centrados en el slider use top: calc(50% - 2rem) en .slider-btns. Gracias por los ejercicios, saludos!

[@vinilsign]

buen aporte

[@heimancastro1954]

otro buen video maestro gracias

[@jonmircha]

👋🏻😉

[@timawid]

Perfecto 👌 Me ha ido muy bien con los ejercicios he podido encontrar las soluciones, también les agrego más detalles, se siente como practicar html, css y JavaScript ✅✅

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy bueno el curso!!!

[@jonmircha]

Gracias por comentar

[@federicoraulmaciasaparicio1339]

Muchísimas gracias, Jon. Siguiendo este ejercicio es la primera vez que me sale un slider y además sin JQuery.

[@jonmircha]

Excelente 🤓 gracias a ti por sugerr el ejercicio, ya que no lo tenia contemplado ;P

[@DanielLozadaDev]

gran aporte, muchas gracias

[@josefabianbeltranmeza6914]

Super booom ;D. No más librerías para Sliders, ya tengo las bases para ir desarrollando y mejorando el mío. Excelente clase nuevamente Jon. Gracias gracias

[@jonmircha]

👍🏻

[@elweonweandolaweafome]

Estoy terminando tu segundo curso de html - css y justo terminamos viendo los slider

[@jonmircha]

👍🏻

[@jesuschirii]

Ya voy por este ejercicio, gracias Jon! Empecé en diciembre 2020 con este curso de JS y mi conocimiento ha crecido enormemente, de no saber absolutamente nada. Graciasssss.

[@jonmircha]

;)

[@eitanstevengil4215]

1:14 de la mañana, no paro hasta completar la clase 100!

[@jonmircha]

😉👋🏻

[@srcuyo]

perdi 10 minutos de mi vida por un espacio q no puse entre los parametros de las clases de los botones jaja. Muy buen contenido JON!! seguimos desde el futuro

[@jonmircha]

👋🏻😉

[@hellg1307]

Este video html-css-js realmente me fortaleció la moral como aprendiz, he aumentado mi ki 💪

[@jonmircha]

}:) static.wikia.nocookie.net/memes-pedia/images/b/b5/Its_over_9000.gif/revision/latest/scale-to-width-down/320?cb=20160321005508&path-prefix=es

[@marcoscardozo6579]

Que buen curso profesor!. En mi caso estuve con la lógica del Slider en JS y pude solucionarlo, el problema que tuve fue con los estilos css u.u, igual pude adaptar su codigo html a mi funcion pasandole mis parametros y funciono. Gracias!

[@jonmircha]

;)

[@yuniorvaron8005]

La parte del autoplay yo la cree con un setInterval y el codigo del next. Gracias Jon por el excelente contenido, es el mejor curso en linea que he tomado.

[@alphamx13]

Muy util tutorial. Se agradece !!

[@jonmircha]

👋🏻😉

[@Bisson156]

Buenisimo Jon muchisimas gracias! Saludos desde Argentina!

[@jonmircha]

Un saludo!

[@jerlandejoseph4350]

John... Que genio eres!!!

[@jonmircha]

😉👋🏻

[@angelabrahamlopezdelgado7574]

Buen video , quieres automatico basta con un setInterval el tiempo que quieres que cambie y pone lo mismo del incremento

[@jonmircha]

👍🏻

[@joelleiva6952]

muchas gracias por el slider jon, lo malo es que no lo pude hacer por mi cuenta pero era mas facil de lo que pensaba. A seguir con el curso

[@jonmircha]

😉🙌🏻

[@drewsand8017]

Nota: Profe creo que sería mejor colocarle display flex al contenedor ".slider", luego darle align-items:center. De esa manera si se centraría en vertical correctamente el ".slider-btns" . Esto sería dejándole el position: absolute al ".slider-btns" pero sin modificar su top, de esta manera así haya perdido su flujo en el html por el position absolute de igual manera respondería a flexbox ya que ninguno de sus ejes ha sido cambiado . Es solo una pequeña observación, ya que de otra manera para centrarlo en vertical tocaría restarle al de top: 50% la mitad del alto del ".slider-btns" y quedaría así : top : calc(50% - 2rem)... Saludos profe, excelente curso

[@jonmircha]

Muy bien :)

[@anthonyavilez2401]

Espera, yo te conozco:)

[@FedericoAlemany]

Muy práctico Jon! Saludos!

[@jonmircha]

Gracias, saludos

[@saulhuarcayaquispe5236]

Gracias mircha por estos videos son muy buenoS de verdad, cuando tenga dinero te lo compensare gracias por tomarte tu tiempo en crear este curso suerte :D

[@jonmircha]

😉👍🏻

[@admoises]

Que genial el Responsive Slider! entendí la lógica de Javascript muy bien. Me encanta que expliques el código CSS, espero con ansias a un futuro que subas el curso de los fundamentos de CSS explicando las cosas básicas y cosas más confusas como el position, las transformaciones, las animaciones, transiciones, propiedades imágenes que aparecen en este video, etc.., muchas gracias Jon

[@jonmircha]

EL position lo explico en el curso de Responsive y las animaciónes, transiciones y transformaciones en el curso de Diseño web no se si es clase 9, 10 u 11

[@admoises]

@@jonmircha oh gracias profesor, una duda todos esos cursos antiguos aún están vigentes, me recomienda tomarlos?

[@normanejm]

Profe, Podría agregar un ejercicio de moverse dentro de un mapa? Algo similar como a google maps? de recorrer la imagen cuando hacemos "drag and drop"? ... (Y también de hacer un "drag and drop" con un slider) Gracias

[@jonmircha]

👋🏻😉

[@MaxielJohannaCamargoGomez]

Profe que contenido tan increible !!!!!

[@jonmircha]

;)

[@emersonpalaciootalvaro2632]

excelente parcero, muchas gracias por compartir tus conocimientos

[@gabrielralfcaceresgabriell319]

Wow, sin duda uno de los mejores ejercicios de la seccion de ejercicios del DOM

[@jonmircha]

Mil gracias!

[@braianrico4422]

Jon mil gracias por todo el contenido que nos brindas, de verdad que es magnifico!!! Bendiciones 🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

🤓🤓🤓🙌🏻🙌🏻🙌🏻

[@andresdegouveia8951]

Eres una crack Jon, te deseo lo mejor!!!

[@jonmircha]

😉👍🏻

[@ricardobacilio879]

Aquí comentando para ayudar en el posicionamiento :v Muchas gracias John!

[@jonmircha]

:)

[@lautarodisalvo8360]

Hola jon, cuando hice por primera vez el ejercicio hace unos 3 meses, la verdad lo hice copiando solamente, ya en la practica tenia la duda de por que por un elemento pasarías un índice como si el elemento fuese un array, resulta que con el queryselectorAll el elemento pasa a convertirse en un array. Esa se me escapaba y me costó un buen rato entenderlo

[@jonmircha]

👋🏻😉 pero hoy ya lo entiendes mejor, es el efecto de la práctica continua

[@manuelmora1311]

maestro !!!!!!! muchas gracias .... estoy retomando el curso jejejeje muchoas cosas por hacer y no tengo mucho tiempo, pero aca sigo muchas gracias sensei🤘🤘🤘🤘🤘🤘🤘

[@rodrigopyth5959]

Muchas gracias por compartir tus conocimientos!!!!

[@jonmircha]

Con mucho gusto

[@Juicio87]

Conseguí hacer el slider pero que los botones fueran responsivos...nop jajaja, el tema responsive lo tengo como asignatura pendiente; yo no hice apenas HTML, lo malo que cada vez que le daba al botón de pasar diapositiva me renderizaba una imagen nueva y no salía en el momento. Lo más complejo en este ejercicio fue el CSS sin duda (para mí) lo de la propiedad inherit lo desconocía al igual que al poner position absolute se perdía el ancho del contenedor. Lo de los divs es un caos, me quita mucho tiempo hasta que averiguo la mejor distribución para que todo sea responsive. Solo queda practicar.

[@jonmircha]

👋🏻😉

[@metalkingang]

En PC me funciona de maravilla el slider, pero en mi celular no sé por qué al tocar los botones para pasar al siguiente o al anterior slide me devuelve al inicio de ma página colocando el # en la URL, es como si no detectara el e.preventDefault por alguna razón 🤔 Aún así como siempre otra clase maravillosa, empecé el curso este año con el objetivo de aprender lo más que pueda y quizás a fin de año ya esté en el último video, gracias por su dedicación y su tiempo profe 🙌

[@jonmircha]

😉👋🏻

[@carlesbautista8293]

Genial Jon!! muy bien explicado, muchas gracias !!!

[@jonmircha]

Con mucho gusto

[@fernandoramirez1548]

excelente :) !!!!! gracias por tus aportes!!!

[@jonmircha]

De nada!

[@chambers4222]

Muy buenos ejercicios, muchas gracias por los aportes! Saludos :)

[@jonmircha]

DE nada , comparte para llegar a más personas

[@edwinvelasquez5117]

Jon excelente tus videos, muy completos, gracias por aportar tan valiosa información a los que buscamos aprender cada día, quería hacerte una consulta, para montar una pagina web que tiene proyección a escalar ¿Es mejor laravel o wordpress? o ¿Qué me recomiendas?

[@jonmircha]

pues depende, si el usuario final estará creando el contenido constantemente definitivamente WP, si es algo ás a la medida Laravel si es que lo sabes trabajar

[@thaironx]

Genial video !! gracias Jon

[@jonmircha]

Con gusto

[@jurrrgenOF]

haces ver a JavaScript fácil para los novatos, muy bien.

[@jonmircha]

😉👍🏻

[@omarlamprea872]

Por acá dejo mi solución al Slider, lo hice algo diferente, creando un array para agregar las imágenes dinámicamente kzbin.info/www/bejne/sHjMZYNomK6maqs y acá están todos los ejercicios que tengo hasta el momento =D omar-lamprea.github.io/DOM-JS/

[@nicocorzi]

Omar: Muy buen aporte y desarrollo. Tuve un problema con el Responsive, ingreso el video pero no me deja pasar a responsive al "achicar" (poner más pequeña la página)... Puede ayudarme?

[@JuanAlvarez-vv4mt]

Jon porque no agregas el evento click directamente desde el archivo principal de js y pasas el evento por los parametros de las funciones importadas? y asi no tienes que crear eventos clic por modulo

[@jonmircha]

Por que estoy pensando en reutilizar ese módulo en futuros proyectos, no sólo pienso en el proyecto actual. Principio DRY (Don´t Repeat Yourself)

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@jonmircha]

😉👋🏻

[@sandokanArg]

Jon, he visto que hay slider de 2, 3 y 4 etapas, se podra ver algo asi, con animaciones y demas yerbas, da para hacer un video asi o una mini serie. siempre me llamo la atencion como hacen para ir incluyendo las imagenes y textos.

[@jonmircha]

Quiza después, pero para efectos del curso de JS el slider se quedará simple como en el video, ya implementaciones más complejas se las dejo a ustedes :)

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@bikramchettri9405]

sir can you implement touch

[@IsaacGarcia-qq8oq]

Hola profe talvez es una pregunta tonta, al hacer el ejercicio tal cual el video, me encontre con que el caracter especial (que coloca la flecha que se agrega mediante un font, al darle click a ese caracter no cumple la funcion del enlace) ya en el menu hamburguesa enseñaste que habia que tambien con el operador OR ||, en la logica de nuestra funcion seleccionemos tambien lo que esta dentro de ese selector asi eso se evita, pero me surgio una duda, queda mas limpio hacer eso en JS? o queda mas limpio darle un pointer-events en none mediante css a ese font? Gracias¡¡¡

[@jonmircha]

Lo que se pueda resolver con CSS siempre será mejor

[@sandokanArg]

este me pierdo el estreno, lo vere al regreso

[@jonmircha]

🤓

[@martinbergesio1990]

Buenos días, Muy buen ejercicio, la verdad para la parte del css si tuve que ver como lo resolvias ya que después de muchos intentos no conseguía el objetivo deseado. Lo que me hace pensar que también me tengo que poner a mirarme cosas de css ya que para la web es muy importante también. Por otra parte la parte de Javascript si que la pude resolver bastante rápido y de una manera bastante parecido a la tuya. Lo único que al contrario que tu yo primero lo había hecho sin parámetros y luego los añadí pensando que es sería mejor. Y por último le agregue un efecto de autoplay que se cancela la hacer click en alguno de los dos botones. Aquí te dejo mi código: github.com/Dachi90/Curso-Jon-MirCha/tree/master/Video%2080%20al%20104 Un saludo y muchas gracias por todo :D

[@jonmircha]

bien :)

[@dvvegaalderete2044]

buenas Profe es un pacer ver tu video tengo una duda profe es mi primer curso de JavaScript y cuando hago este ejercicio como usted me dice classLisst undefined no esta definida es que ya no funciona como lo hiso usted profe plis ..

[@dvvegaalderete2044]

ya resuelto profe🦊 dentro de poco estudiare otros cursos que me recomiendes para mi algo de CSS perro desde las bases quiero aprender espero su respuesta soy tu amigo y alumno Duanly Vega:

[@jonmircha]

Sigué mi ruta de cursos de Frontend Designer jonmircha.com/cursos#frontend-designer

[@DanielaHernandez-co4et]

Buenas Noches, me parece que sabes explicar muy bien. Estuve intentando el ejerció pero me sale un error no se en que me estoy equivocando. tTypeError: Cannot read properties of undefined (reading 'classList') at HTMLDocument.

[@jonmircha]

Seguramente es un error de dedo que tienes mal escrito el nombre de alguna variable

[@facundopaez742]

Hola he tenido el mismo error, y encontre que la siguiente linea de codigo estaba mal escrita: $slides = d.querySelector(".slider-slide") debiendo ser: $slides = d.querySelectorAll(".slider-slide")

[@davidmolina7645]

Hola Buen día profesor Jon muchas gracias por este curso, mi duda es que no se porque a pesar de usar e.preventDefault(), no se cancela la acción por defecto del enlace que me lleva al inicio por el href="#"; cuando reviso por consola no se ejecuta la funcion slider(). Saludos desde Argentina

[@jonmircha]

😮🤔

[@pepepixal6640]

a mi me pasó lo mismo, me faltaba los espacios en -btns .next y -btns .prev: $nextBtn = d.querySelector(".slider-btns .next"), $prevBtn = d.querySelector(".slider-btns .prev"),

[@melvinalexanderrodriguezhe2184]

​@@pepepixal6640 Gracias eso era

[@matiaswelschen1136]

@@pepepixal6640 Gracias, iba a estar un par de días en darme cuenta 😆.

[@juliobarrera1014]

Hola qué tal Jon, te tengo una pregunta, para cuándo se vienen los vídeos de canvas en js?

[@jonmircha]

Canvas es una API más de JS en el navegador, la vdd no tengo planeado ningún video al respecto pues no tengo mucha experiencia en dicha API, sorry

[@juliobarrera1014]

@@jonmircha 😭😭

[@emanuelgauna222]

hize todo tal cual pero toco el boton para cambiar la imagen y me sigue mandando al inicio de la paginaa

[@jonmircha]

quizá te falte el preventDefault

[@aronlife1098]

De cierta manera este ejercicio es muy similar al ejercicio del munu

[@aronlife1098]

menú

[@miformadepensar]

super fácil jejejeje

[@jonmircha]

😉

[@thejb9902]

No lo logre realizar :(

[@jonmircha]

ánimo

[@estebanoctaviopavezllanca2385]

Estimado adjunto ejercicio, github.com/Stev-189/Ejercicio_DOM Gracias Profe.-

[@fraivernoelvis7323]

hola jon tengo erro me dice error classList

[@jonmircha]

🤔

[@helipalacio8772]

👨

[@jonmircha]

👋🏻😉

[@defiwallets3137]

Que tan practico es usar un slider para videos, o es mejor usar otra tecnica, saludos

[@jonmircha]

Depende del objetivo de tu interfaz

[@YuriMayakoskiSivizaca]

@@jonmircha Quiero hacer una galería de videos tutoriales de una aplicación de escritorio, un video por cada modulo que quiero explicar

[@abelsilvasantacruz9584]

40:53 Me acabo de dar cuenta que Vanilla Js era el Javascript Puro, yo pensaba que era una libreria o framework, y me rehusaba a aprenderlo... quede como un payaso xd

[@jonmircha]

🤭😅🤣

[@Juankybi]

no me sale Jhon. Llevo varias horas y he conseguido llevar al final pero los botones, al pulsarlos suben hacia arriba. Yo pensé que era por el boton_scroll, pues hace igual. Hago un console.log(e.path) del Evento y me sale esto: (9) [a, div.slider-btns, div.slider-slides, section#seccion12.section, main, body.dark-mode, html.dark-mode, document, Window] No existe la posibilidad de conseguir el codigo original? Un dato interesante del css es que no me iban los botones hasta que puse .slider-btns a { display: block; porque tu tenias puesto .slider a (y te funcionaba). Es decir que omitias el -btns. Esto ultimo quizas obedezca a actualizaciones del navegador Chrome, pero lo que realmente me trae de cabeza es lo de los botones, que no consigo que pasen de imagen. Bueno, seguire intentandolo o tendre que dejarlo para cuando sea mas experimentado.

[@jonmircha]

github.com/jonmircha/youtube-js

[@Juankybi]

@@jonmircha gracias jonh, solo me interesa la parte en la que cambia la imagen de diapositiva. Lo acabo de probar, tu código, y hace lo que el mio. Es decir, no hace lo correcto, ambos botones se van al principio de la pagina. Que curioso no? Pero bueno, no demos mas tiempo a un problema tan pequeño. A mi me da rabia que estas cosas pasen, pero soy consciente que me agota y me hace perder un tiempo precioso para emplearlo en tus videos. Estoy ilusionado con las materias que aun quedan y dejaré este asunto. Y el codigo no lo voy a mirar, para nada. Hay que aprender, como tu dices, haciéndolo como corresponde.

[@marcoantoniocortes6299]

@@Juankybi revisa tu codigo html en el contenido de y compara el html de cada boton con el resultado de e.target

[@syberiaok]

@@Juankybi puede ser que hayas puesto las clases juntas dentro de las variables: const $nextBtn = d.querySelector(".slider-btns .next"); ahí en el paréntesis, van separadas btns espacio .next. me pasaba eso.

[@gustavomemes]

me esta pasando lo mismo y no lo puedo resolver

[@raulruidiazgoleadordeperu9524]

NI un dislike :o

[@jonmircha]

};)

[@EducacionCultura1992]

Mejor curso de html jon mircha. Mejor curso de css jon mircha. Mejor curso de javascript jon mircha. Mejor curso de boostrap jon mircha. Mejor curso de react jon mircha. Mejor cutso de Git jon mircha. Mejor curso de figma jon mircha. Mejor curso de bases de datos jor mircha. Mejor curso de php jon mircha. 🙏🏼 Etc........ flex-box, grid, web-pack. Aqui lo tienen todo comunidad. 🎉❤

[@jonmircha]

😅🙌🏻

[@NonsenseIsOver]

La verdad haces que la programación sea sencilla jaja

[@jonmircha]

;)

[@_-_-_-_-_-_-_-_-_---_-_--_----]

Para sliders más complejos mejor utilizar librerías tipo slick.js, owl, swiper, bxslider

[@juanferrer5885]

Les dejo otra alternativa, use 4 parametros, uno adicional a Jon, que contiene el slide que esta activo. Espero les sirva. codepen.io/JuanFerrer96/pen/JjMEpaz

[@jonmircha]

👍🏻