Slider automático con HTML y CSS

[@Jygproyectosweb]

Nuevo video, un sencillo slider con HTML y CSS

[@dalexanderbc3723]

Como haces para sincronizar sublime text con el navegador, usas algún plugin o que programa usas,, por favor responde

[@Jygproyectosweb]

Hola Deiny, no es sublime text, aquí estoy utilizando Brackets y el live preview que viene alli

[@dalexanderbc3723]

J&G Proyectos Web Ese editor que usas es bueno y funcional como sublime text? quisiera probarlo,,, y gracias por responder brother :D

[@canacoloscabos8345]

+J&G Proyectos Web hola! tengo un problema, no me pone las imagenes horizontalmente con la propiedad que dices aqui. me puedes decir otra forma? Gracias!

[@FarrellAbarca]

uno con miniaturas!

[@Bernardita2012]

Muchas gracias...usted es realmente muy bueno explicando, estoy estudiando Ingeniería en Informática, y me dieron de tarea diseñar una web, gracias a su video tan bien explicado pude agregar un Carrusel a mi pagina MUCHAS GRACIAS !!!!!!

[@josemanuelsolorzanocedeno390]

Este tipo casi me hace llorar por la forma tan "chevere" que tiene de explicar :,(. Buen vídeo.

[@danielvaldez1949]

sos el mejor gracias por tu aporte a la comunidad del cyber-espacio desde la ciuidad de posadas misiones argentina.

[@ELNIKO16MARI]

Eres el mejor bro estoy susbscrito tanto a tu canal como a su blog y pagina de face la verdad son muy buenos sus vídeos y aportaciones y tu forma de explicar es la mejor, gracias de verdad me has ayudado mucho, espero te encuentres bien, saludos desde México

[@Jygproyectosweb]

+Oskar Galan Muchas gracias, saludos desde Perú

[@makotoshishio3699]

+J&G Proyectos Web LOL Perú, de que parte eres amigo..!

[@NELSITON112]

@@makotoshishio3699 wtf i am peru ;V

[@santiagosalazarastudillo7158]

Muchas gracias por la explicación y la enseñanza, excelente método, de hace 7 años a hoy, sigue siendo un material muy valioso y directo.

[@RoggyTM73]

buen vídeo parcero y buena explicación de cada linea saludos

[@mariodiegolivano3666]

¡Gracias! me sirvió de mucho. Lo apliqué en wordpress con CSS Adicional, con un slider sin movimiento de una plantilla. Eres genial

[@marinamartinez1657]

Te amo, todo el día provando con JavaScript y esto sí me funcionó. :')

[@facundoibanez8010]

hermano es impresionante lo que ayudan tus videos ! se agradece muchisimo el aporte y mas por la gente que recien estamos arrancando con todo este mundo! segui asi, son muy buenos y explicas de maravilla!! saludos desde Argentina!

[@ANIMEMES2023]

Buen video.Una pregunta. El borde celeste del slider, no lo estas colocando en css? Es una propiedad del brackets?

[@Jygproyectosweb]

+DibujaloTODO es de la vista previa de brackets solo para ver que estoy seleccionando

[@ANIMEMES2023]

Muy interesante ,yo para ver el div tengo que colocar un fondo background............¿ esa vista en tiempo real y las lineas celestes de selección las tiene SUBLIME tex 3??, gracias de antemano .

[@ninloz545]

wtf ? animemes?

[@rolandarrieta2806]

sos un crak saludos desde venezuela papa todo calidad tiempo buscando a alguien q explique facil y sencillo como usted

[@BeatrizEncisoVillarreal]

padrisimo tu video, cool y de forma simple... sigue compartiendo tu conocimiento :)

[@cliberdavidninaquispechoqu8823]

Eres lo máximo, con tus vídeos entiendo mejor , acabo de aprender lo que no aprendí con el profe . Saludos desde Arequipa

[@agathagomes3941]

Seu trabalho é maravilhoso! Parabéns!

[@luisenriquegarciadomador7050]

Buenos dìas, gracias por su tiempo, sencillo y pràctico, feliz dia, saludos desde Venezuala

[@MMyNregresa]

Muchas gracias, sigue con los vídeos, tienes mucho talento.

[@joseluisespinosa2409]

Excelente video y mejor aun tu explicación, gracias por compartir tus conocimientos, que Dios te bendiga!

[@arturodisenador290]

Gracias por tu video. Si me sirvio. Saludos

[@marlenevazquez7220]

Tardé horas buscando algo así y no me funcionaba nada. ¡Excelente vídeo! Me suscribo de inmediato..

[@alessiopantiaco1213]

Impressive! Greetings from Italy!

[@daalwada]

I don't understand the language, but I was following each and every step what you were doing. Thank you so much for this awesome video. I was searching for this functionality since 3 months, and finally I could find the best video ever!

[@KevinV6]

Me ha servido, me he suscrito, solo tengo un detalle ¿como hago que las imagenes se ajusten a una división de pantalla? ya que el slide lo puse dentro de esa sección de pantalla, pero las imagenes tienen diferentes dimensiones ¿como hago que cada imagen se ajuste al ancho y largo de la división de la página?

[@sagorjonmtz]

lo pudiste solucionar?

[@maximinorenteriam1531]

Mi hermano muchas gracias por compartir tu conocimiento conmigo ha sido de gran ayuda para mi este vídeo y quiero felicitarte y que Dios te pagué, Excelente trabajo aplique esto a un proyecto y me funcionó salvo que cuando lo hice con mas de 4 imágenes me tuve problemas igual yo debo revisar bien esa parte pero muy bueno.

[@urielgomez471]

De que dimensiones con las imágenes que usas hermano?, excelente vídeo!!

[@jangosuper4700]

a la hora poner un texto abajo se va demasiado abajo

[@pierinavilla3753]

No me deja comentar desde la computadora agarre y entre desde el celular solo para decirte que sos un genio , gracias.

[@fborjagarcia9351]

Gracias por el video, tengo una duda quizas me la puedas resolver ? Las imágenes al estar pegadas y realizar la transición siempre me queda a la vista un trozo de la imagen anterior y no tengo ni idea de como solucionarlo. Es decir, la primera imagen está perfecta, pero en cuanto cambia a la siguiente , esta nueva imagen contiene todavía un poco de la imagen anterior, por lo que no se ve al 100%. Espero haberme explicado y me pueda ayudar. Genial el video por cierto ! Salu2

[@tobiasjuarez6556]

me pasa lo mismo bro

[@tobiasjuarez6556]

si supiste como soucionarlo avisame porfis

[@gustavomurtfeldt7414]

¡Hola! Muy interesante el tutorial, pero me surgió una duda a partir del minuto 4:15, que me gustaría que me la aclararas si fuera posible. No entiendo por qué cuando le das a los elementos un width=100%, no toman el 100% del elemento "padre", y en cambio toman el 100% del "abuelo". O sea, yo creo que los deberían tomar el 100% de , pero toman en cambio el 100% del . Gracias de antemano.

[@Jygproyectosweb]

+Gustavo Murtfeldt Si están tomando el 100% del ul, no entiendo porque dices que toman el ancho del slider. Recuerda que el ul tiene 400% de ancho, por eso al darle 100% a los li cada, como son 4, cada uno ocupa 1/4 del ul

[@gustavomurtfeldt7414]

Bueno, me explico mejor: yo hice el ejercicio en mi computadora, y revisando las medidas de los elementos con el inspector de Firefox, obtuve lo siguiente: 1200px 4803px 1200px Por eso digo que el tiene el 400% de su padre, pero los tienen el 100% de su abuelo y el 25% de su padre… Debo tener algún error de conceptos que no me está permitiendo entender del todo este ejercicio.

[@Jygproyectosweb]

+Gustavo Murtfeldt el si tiene 400% de su padre(slider, y es 400% porque son 4 imágenes si hubiera 7 sería 700%), hasta ahi bien, pero la medida del es en base al (su padre) no del abuelo(slider) al decirle que ocupe 100% le estamos diciendo que ocupe 1/4 del a lo cual coincide con el tamaño del slider(que es el objetivo). Pero la medida es en base al ul. Te estas olvidando del 400% por eso te estas confundiendo.

[@gustavomurtfeldt7414]

Bueno, gracias, pero ahora creo que flexbox tiene mucho que ver en esto, porque si yo le cancelo el display:flex al , ahora sí, los toman el 100% de su padre (4803px en mi monitor). Y por las pruebas que estuve haciendo, para que tomen el 25% del con display:flex, hay que darles un width igual o mayor a 25% (no tiene que ser 100% necesariamente). Muy interesante.

[@Jygproyectosweb]

no tiene nada que ver flexbox, estas confundiendo las cosas, incluso sin flexbox y utilizando float pasa lo mismo.

[@Kevin-pp9lj]

como pongo un cuadro de texto y imagenes de redes sociales pero que sean estaticos y esten dentro del slider :'( ayudame por favor.

[@MrG1g4Pl3x]

un poco tarde pero con un div que tenga position absolute lo hacias

[@nelsonsilva1689]

Excelente y muy bien explicado, llevo poco tiempo programando en html, css, php javascript asi que me vino de maravillas.

[@alonsovalls4633]

AYUDA cuando pongo display mis imagenes siguen en vertical y a partir de ahi ya no hace nada el codigo

[@williamdxw]

prueba con float:left

[@alonsotorrealba5800]

Hola , gracias por el aporte , por fin entendí hacer slides, tienes buena metodología de enseñanza . Exitos

[@lemondev9078]

No me sale. Las imágenes me salen en fila :/

[@oscarcardoso7599]

@@misaelguevara5867 Hermano, checa que hayas puesto correctamente el dentro del head, y que este bien la estructura del html

[@GTECBC]

2022 y tu video me sacó de un apuro! Gracias.

[@geraldmacias7037]

No me funciona por el overflow: hidden; no muestra las imagenes

[@21fanaTICA]

Funciona perfecto

[@m4estudio]

A mi no me las oculta y se siguen viendo super pequeñas, no sé que hice mal ya no le veo error

[@froz6832]

el error de la imagen cortada es por la resolucion de la misma, todas las imagenes tienen que tener la misma resolucion, a mi tambien se me cortaban las imagenes pero era por que una de las imagenes era panoramica y las otras de un formato "normal" por asi decirlo.

[@edhenlisguedez4587]

te recomiendo que cheques el codigo metodicamente un error en numero letra o coma es suficiente para que el codigo no se ejecute, es recomendable colocar las imagenes iguales, personalmente lo ejecute perfecto tenia algunos errores en numero de porcentajes al corregirlos todo bien

[@luisalbertoguzmanhernandez2882]

Excelente Carlos, me ayudó mucho lo práctico de tu código

[@catalinahernandezorozco2919]

Buen Video pero tengo un problema uso Sublime-text 3 y la parte de los @keyframes no me va.... lo hice tal cual pero no me funciona me aparece en color blanco los porcentajes.... Ayuda porfa, y gracias

[@Jygproyectosweb]

+catalina hernandez orozco Hola Catalina, el color blanco es normal en sublime, revisa que el nombre coincida. En todo caso aquí te dejo el codepen: codepen.io/JyGProyectosWeb/pen/PNBRev con el código. Saludos

[@admon.basic.5172]

J&G Proyectos Web

[@albertosantiago3895]

instalate Netbean

[@hacklife18]

SI LO LEES TODO VERAS LOS CÓDIGOS COMPLETOS Y COMO HACERLE PARA QUE SE VEAN BIEN EN CELULARES Y UN EFECTO HOVER MUY BONITO. bueno baya, interesante lo que paso, por que un código es un código y funciona en cualquier editor de texto hasta el bloc de notas, y tendrás que verificar bien el código por que con un simple error no funciona.Y lo que hace sublime text es mas bien facilitarte el código auto completándolo, y en las versiones mas avanzadas el @keyframes aparece rojo. Y por cierto con todo respeto mmm no se porque pero me sorprende que una niña busque este tipo de tutoriales en youtube yo tengo 13 años y este tutorial es de lo mas fácil, y como dije soy niño ¿cual es tu edad? ademas te regalo los codigos css solamente cambia los tamaños en .slider ul { overflow: hidden; display: flex; padding: 0; width: 500%; } ,dependiendo de cuantas imágenes ayas puesto por ejemplo 500 para 5 imágenes etc. Y los demás tamaños que quieras mira es este: .slider { width: 50%; height: 50%; margin: auto; overflow: hidden; } .slider ul { overflow: hidden; display: flex; padding: 0; width: 500%; animation: cambio 20s infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .slider ul li { list-style: none; } .slider ul img:hover { transform: scale(1.5); } @keyframes cambio { 0% {margin-left: 0;} 20% {margin-left: 0;} 25% {margin-left: -100%;} 45% {margin-left: -100%;} 50% {margin-left: -200%;} 70% {} } y si lo quieres hacer para celulares usa esto es para cambiar los tamaños dependiendo del dispositivo que se usa se le llama "responsive" por ejemplo: @media (max-width: 968px){ .slider { width: 80%; height: 30%; margin: auto; overflow: hidden; } } esto por ejemplo una tableta, y para un celular puedes usar algo que abarque un width de 100% si no tienes un inconveniente por que de esta forma se ve bien el los teléfonos: @media (max-width: 670px){ .contenedor-global{ width: 100%; height: 1200px; } .slider { width: 100%; height: 35%; margin: auto; overflow: hidden; } } a si par aun efecto hover vistoso en computadoras utiliza esto: .slider ul img:hover { transform: scale(1.5); } y en la escala es el tamaño que quieres que aumente, y eso es todo aun que hay mas efectos bonitos, adiós espero la respuesta a mi pregunta"¿Cual es tu edad?".

[@edisonenriquerodriguezlope8551]

@@Jygproyectosweb bro te amo se que pasaron 5 años pero buena onda bro gracias a ti pude hacer mi tarea

[@anthonyfiguera4796]

Gracias, que bueno es explicando cada detalle

[@narusixtails]

No pude lograrlo, lo hice tal cual lo vas haciendo. Paso a paso y no me salio!!.

[@minnie9067]

YugiNaru94 x2

[@ricardorien]

Tampoco a mi me sale, el list-style ni se aplica. No entiendo nada.

[@delonghi1812]

a mi me paso igual pero le puse el y si jalo

[@Spirituhim]

muchas gracias, saludos desde México

[@davidgalain8456]

Sos muy buen docente, se entiende perfecto para que hacer cada cosa. Saludos desde Uruguay!

[@saharamonse]

Es un muy buen video, muy claro y sencillo. Gracias.

[@fqm33colombia7]

excelente explicación, sigue compartiendo me ha servido mucho, muchas gracias, desde Bogotá, Colombia

[@willmervalera5488]

Excelente amigo..eres un crack...muy pedagógica tus explicaciones...continua asi.

[@niltonduque8872]

Excelente amigo te felicito por el aporte a la comunidad, ayudas a despejar y a tener buenas nociones. Gracias.

[@intervoipdecolombia]

Excelente amigo, funciono correctamente en octubre 2021, saludos

[@filipoxtan]

estan muy buenos tus tutoriales amigo voy siguiéndote en todo lo que haces y me va quedando muy bien, muchas gracias amigo.

[@mairamedina4526]

Un genio explicando!!! Gracias!! :)

[@akirafudo4499]

al primer intento me salio gracias tienes un buen metodo de enseñansa lo que si soy malisimo para las matematicas y no sabia como agregar los tiempos de trancision para 15 imagenes pero ahi lo fui resolviendo

[@sergiocaceres7973]

Muy buen tutorial, me encanta como me ha quedado, he hecho un par de modificaciones porque yo lo quería que ocupara toda la pantalla, pero me has ayudado mucho.

[@shingameryt47]

gracias ese tutorial me sirvió en mi clase de la universidad

[@adelkerhuascaraguilar8815]

execelente video maestro bien explicado gracias

[@alberto_sibrian03]

Bro gracias todo sencillo y simple la explicacion sigue asi y de nuevo gracias y bendiciones brother!!

[@juanmanuelmuozlima9903]

muchas gracias hermano me fue de bastante ayuda, muy buen video y buena explicacion del paso a paso.

[@larizasolano9128]

Esto me salvó la vida, casi lloro de lo fácil que fue jaja graciassss!!

[@lilandazabal1548]

Hey nena, donde los hiciste? En el blog?

[@ignacioboudou1951]

Gracias, me ayudan mucho tus videos a aprender, explicas muy bien.

[@AngelBG]

Muchas gracias por esta aportación, el principio de funcionamiento con el que hiciste el slider, me sirvió para hacer una implementación extra

[@cesarurielcotocoazozon9689]

Muchas gracias por el tutorial la verdad que a funcionado mucho gracias a ti he podido armar por partes mi pagina web

[@avila40]

un video pequeño pero sustancioso, gracias Bro..

[@enriquehuarangahuaman7876]

muchas graciaaaaaaaaaaaaaas me salvastes de una exposicion de una beca en la que estaba bendiciones!!!!!!!!!!!!

[@joposepeph]

Buenísimo!!!! Una explicación clara y detallada.

[@madlcmnk]

Gracias, me ha ayudado mucho la información que otorgas, saludos desde México.

[@nadiyaklokova8175]

Muy bien explicado. gracias

[@julitobios]

sos un héroe sin capa!!!!

[@leidergalindo3705]

buen video tienes una muy buena forma de explicar gracias desde el 2021

[@samupeguero]

Muchas gracias! Me ha sido de aprendizaje

[@Korsariovirtual]

Excelente tutorial, muy claro y preciso.

[@MrTEJOCA]

Muchas gracias por tu aporte my friend.

[@alejandrocarranco6982]

Gracias por compartir. Excelente explicación. Felicidades

[@Itsorangemx]

Buen video! muchas gracias por tu aporte! 😃

[@JustoLux]

me parece muy interesante el video y podría ser de utilidad. entiendo que no quiera compartir el codigo, pero al menos, si desea que le sigan viendo en su canal, HAGA MAS CLAROS los videos, se ven borrosos y algunas personas (como en mi caso) que necesitan lentes para ver bien y aun asi se dificulta porque el video no se ve bien.

[@lizbethmelgarejo5406]

Buen video dando catedra a la docencia.

[@josealfre1650]

gracias j&g ya hice la galeria Dios te bendiga

[@alexsandoval3293]

Muchas gracias, me ayudó bastante este vídeo. Saludos.

[@nvyago99]

Muchas gracias me ha servido mucho, sigue así, explicas muy bien. Saludos desde Venezuela!

[@ivanmunoz120]

excelente tuto! muchas gracias!

[@manolo130496]

Super entendible, muy buen video

[@leninsantos508]

Mas de un millon de gracias, por que compartes tus conocimientos.

[@csedron]

Simplemente magistral, muchas gracias!

[@estebanwb8457]

muchas gracias sigue subiendo tutoriales son de mucha ayuda gracias

[@marcojairrodriguezhernande7953]

Qué bueno eres para esto, muchas gracias por tus vídeos.

[@rafa3lbm]

Me ayudaste mucho! Muchas gracias!!

[@luisleonelgalvanmunoz4027]

Muy buen video!. Muchas gracias

[@tinta010]

Excelente, por fin un slider de lo mas básico.... gracias por tu tiempo!!!

[@Tomqwea]

Muchas gracias por su ayuda, me sirvió muy facil y entedible

[@jeffont7016]

Excelente video, me funcionó 10/10 para mi proyecto semestral de desarrollo, muchas gracias !

[@isabelcristinaberrio1769]

me super encanto este video aprendi mucho me gusto tu forma enseñar

[@renzogf1103]

Haces que las cosas sean más sencillas, GRACIAS EXCELENTE VIDEO

[@ElROJITAS]

se merece un like, me sirvio mucho para mi proyecto de sena

[@juanpablomorales9609]

MA-ES-TRO! Gracias por tanto ;)

[@chavelisantos]

Excelente explicación!

[@TheDucKing]

Sos lo mejor chabon, me re ayudaste. Gracias!

[@eduardoklarmann1083]

Máster, muy buena explicación

[@JaimieVega]

Excelentes tus videos y sobretodo muy bien explicados.Gracias por compartir tus conocimientos

[@Jygproyectosweb]

Jaimie Vega gracias a ti por verlo

[@SonidosFX]

Excelente explicación al igual que el video !

[@kevinperedo5639]

que capo este profe , me suscribo

[@Chempox]

Hermano eres un dios, cuando acabe de hacer esta pagina te construiré un altar

[@Neoevolution]

Excelente aporte amigo felicidadez

[@Henry_Nunez]

Gracias por el video y excelente explicación. 👍

[@yoto601]

Me vi mil tutoriales y este fue el único que me sirvió

[@jln7437]

en serio, a mi no me funciona