💙 Cómo hacer un slider en HTML y CSS [Código para copiar]

Подписаться 119 тыс.

Просмотров 186 тыс.

50% 1

Versión MEJORADA del Slider con hater de por medio
👇👇
• ⚡ Respondo a un HATER ...
¿Quieres aprender CSS de la mejor forma posible?
👇👇 ACCEDE al CURSO de CSS GRATIS
bit.ly/3tf6OMW
Aquí teneis el código por si queréis jugar con él:
github.com/KikoPalomares/Slid...
Momentos clave del video:
00:00 Creamos el html para el slider
04:05 Hacemos el CSS para el slider
11:05 Resultado final
🎁 GUIA GRATIS: 5 Técnicas de ChatGPT para Desarrolladores 👉 crz.dev/tecnicas-chatgpt
📚 Recursos de programación 👉 crz.dev/sub
👨💻 Formación de IA para Desarrolladores:
crz.dev/ia-star
👨💻 Todos mis cursos gratis:
kiko.pro/cursos
📚 Puedes ver todos mis libros aquí:
kiko.pro/libros
📘 MI LIBRO "No todo es programar":
notodoesprogramar.com/
🦊 100 Fábulas para Programadores
kiko.pro/100fabulas
📙 Libro: Aprende HTML
kiko.pro/librohtml
👁️ Puedes encontrar cosas más interesantes en:
kiko.pro/
🖱️ Si quieres ver el mi setup completo 👉 kiko.pro/setup
🎉 Continua la fiesta en mis otras redes sociales:
Discord: kiko.pro/discord
Instagram: kiko.pro/instagram
Twitter: kiko.pro/twitter
TikTok: kiko.pro/tiktok
GitHub: kiko.pro/github
kikopalomares.com/
Algunos de los enlaces son enlaces de afiliados, por lo que quizás reciba alguna pequeña comisión por compras a través de esos enlaces.

Наука

Опубликовано:

30 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 244

@kikopalomares 2 года назад

Versión MEJORADA del SLIDER gracias a un HATER 👉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vD42cs2fAo8.html

@Jose-ub1yp Год назад

no todos los heroes llevan capa

@jofresanchez2051 2 года назад

Muchisimas gracias, llevaba buscando bastante tiempo quien me explicara de manera facil y sencilla como usar un slider para no tener que usar framework.

@JuanReyes-hl2nb Год назад

Muchas gracias por existir.. mas personas como tú.. Ayudas mucho. Eres un experto en explicar gracias a ti aprendo más. Fácil..

@Xurdefr11 5 месяцев назад

Mis felicitaciones y agradecimientos por este material que nos proporcionas. Muy bueno, sencillo y muy bien explicado.

@securecodingdevelopment5023 2 года назад

Excelente!, nada mejor para optimizar el código, te agradezco mucho este contenido el uso avanzado de CCS3... ya me imagino el nivel de tu curso, exito

@ulisesmak 2 года назад

muy buen video, llevaba un tiempo buscando un video que explicara como hacer un slider de forma sencilla, muchas gracias!

@quinojuan2 3 года назад

Hace falta mas gente como vos. Gracias

@elphslegado7042 3 года назад

graciasssssssssss, de los 10 videos que vi sobre esto tu fuiste el único en el cual si me funciono me salvastes de una presentacion muchas gracias

@kikopalomares 3 года назад

me alegro!! 😬

@armandoriosramirez5251 2 года назад

que grande eres hermano, me sirvió de mucho unas cuantas modificaciones y tengo justo lo que busco

@josemejias081 3 года назад

Hola Kiko, de verdad muy buen tutorial, he asimilado bastante tu explicación, soy nuevo en esto de programación, autodidacta 100%. Gracias por compartir

@salvadorvillegas4612 3 года назад

Eres un genio Kiko. Muchas gracias profesional, puntual y bien explicado. Eres una As.

@kikopalomares 3 года назад

muchas gracias por tu comentario!! 😁

@V1-172wxwxwxwxwxwxwxxw 2 года назад

Amé tu trabajo fácil de entender lo usaré para un proyecto final

@eribertmarquez452 3 года назад

Muy bueno un video de youtube distinto a lo que hace la mayoria de la gente, lo unico que no me gusta es que si las imagenes pesan mucho puede que sea un poco mas lenta la carga pero en general es un estupendo metodo muy sencillo y practico

@valerio9851 Год назад

no he visto aun la version mejorada pero este video me ha encantado!!!!

@juanmanueliazzetta8676 Год назад

Eres un crack, me has ayudado muchisimo en mis estudios

@wonkaademon 3 года назад

Muchas gracias, me acabas de salvar en un trabajo final. Voy a compartir tu vídeo.

@kikopalomares 3 года назад

Genial!! 😁

@rangarit 2 года назад

Sencillo, facil y efectivo.. Soy profesor y estoy haciendo sliders html para mis alumnos.. quisiera saber si me puedes aconsejar la forma de incrustar animaciones .js o html en cada slider , para hacer mas explicitas las presentaciones... gracias

@Megandrooide 3 года назад

MUY BUENO Y MUY BIEN EXPLICADO GRACIAS!!

@profedavid5846 3 года назад

Eres un genio!!! Mil gracias por tu aporte.

@SkullOwner_ Год назад

Que buen video. Sencillo, al grano y efectivo :D

@anakarina74 3 года назад

Muy clara tu explicación ,hiciste muy sencillo algo q otros no....se agradece q compartas tu conocimiento , t dejo mi like ,mi suscripción y mi comentario

@kikopalomares 3 года назад

muchas gracias y bienvenida!!! =D

@maxiagustin6529 3 года назад

Me ah encantado , sos un buen profesional y muy bien explicado el código, muchas gracias

@kikopalomares 3 года назад

Muchas gracias!! 😁

@JavierMarinSuaza 3 года назад

Muchas gracias por tan excelente video se comprende muy bien, todo super bien explicado,Recomendado totalmente Saludos y toneladas de Bendiciones

@kikopalomares 3 года назад

muchas gracias Javier! 😁

@novoti43 3 года назад

¡Genial! Muchas gracias por el video.

@maurogastonherrera7727 3 года назад

Gracias por el tip, esta buenisimo, y tambien por el consejo no sabia que convenia mas siempre html y css. Segui asi, saludos de ARG.

@kikopalomares 3 года назад

gracias por tu comentario! saludos!! =D

@RubiolaYankee 3 года назад

Excelente, muy facil de hacer y lo explicaste de 10! Gracias!

@kikopalomares 3 года назад

muchas gracias! =D

@sandraquevedo5789 2 года назад

sos un crack!!! mil gracias por tu aporte!!!

@julianvegamunoz2321 3 года назад

Hola!! Muchas gracias por la explicación! Muy claro y preciso!! saludos desde Chile!!

@kikopalomares 3 года назад

Saludos!! 😁

@ldh5764 3 года назад

excelentemente bien explicado.Muchisimas gracias! nuevo follower

@kikopalomares 3 года назад

bienvenido!! =D

@mto8a 4 года назад

Buenísimo para optimización de una página

@frxngb 2 года назад

Buen video, funciono el slider a la perfección

@MyTvNetEs 3 года назад

Esta muy bien explicado saludos desde México

@DavidRuizfv 3 года назад

me suscribo y like... te sigo en instagram pero recien me di cuenta que no te seguia en youtube.gracias muy clara explicación

@kikopalomares 3 года назад

genial!! bienvenido a RU-vid! 😁

@ColdBits 3 года назад

esta muy bien nadamas unas cuantas correcciones al CSS para hacerlo responsivo lo primero seria cambiar las partes que fijan un numero en pixeles (px) en los width para que se ajuste al tamaño de la ventana y lo segundo es quitar los numeros para que solo se vean los puntos y sea mas elegante la version que tengo con sus correcciones aqui: .menu li a{ display: inline-block; color: white; text-decoration: none; background-color: grey; padding: 10px; width:20px; height: 20px; font-size: 0px; border-radius: 100%; } ul.slider li img{ width: 100%; height: 300px; object-fit: cover; } ul.slider{ position: relative; width: 100%; height: 300px; } .container{ margin:auto; background-color: white; width: 80%; padding: 30px; } creo que esas son todas las piezas y para los que tengan algun menu o header responsive usen z-index:99; en estos porque las imagenes tapan el menu a veces esa es la correccion ;)

@deadfx3725 3 года назад

Muchas gracias, te amo

@andrearivera7065 Год назад

Muchas gracias, fuiste muy claro. ♥

@erickchavez4551 3 года назад

Mil gracias por el tutorial, me será de mucha ayuda 👏

@kikopalomares 3 года назад

genial! me alegro!! 👍

@kikopalomares 4 года назад

CURSO GRATIS de CSS 👉👉 bit.ly/3tf6OMW

@profedavid5846 3 года назад

Muy generoso de tu parte. Gracias gracias!! 👍👍👍

@joseandresurbanomujica9564 Год назад

muchisimas gracias me has ayudado un monton!!!! LIKE

@Irving_-hx6dd 3 года назад

Muchas gracias realmente me ayudo!! :D

@valeriaandino5849 3 года назад

Muy bueno! Muchas gracias

@martin-cm9sw 3 года назад

grande Kiko!! gracias a esto la pequeña pagina que estoy haciendo quedará genial jeje

@kikopalomares 3 года назад

💪

@gabiper223 Год назад

Gracias Kiko!

@uflorez29 3 года назад

que buen video muy explicito justo lo que necesitaba

@kikopalomares 3 года назад

genial! 💪

@anakarenortizcovarrubias8770 2 года назад

Muchas gracias, me acabas de salvar de un examen final :)

@isaacvillalobos3037 2 года назад

Buenisimo video, explicacion excelennte

@agusrezett6109 4 года назад

Primer video que veo y me encantó la intro lpm

@kikopalomares 4 года назад

muchas gracias!!! 😁

@acsynth4942 3 года назад

Excelentes tutos.

@davidtessore9700 3 года назад

que buen contenido que tenes, ya me suscribi, un saludo desde argentina

@kikopalomares 3 года назад

genial!! bienvenido!! 😁

@angelfigueroa6662 2 года назад

WOOOOW! me encantó, no conocía lo de target, me encanta el concepto y lo mejor que solo con HTML y CSS, una pregunta amigo, cómo podría hacer que cada 3 segundos se cambie solito al siguiente? supongo que se deberá usar js pero me gustaría que me orientaras, gracias.

@Rebel94122 Год назад

Bien merecido like que te doy, video que aún se mantiene vigente

@kikopalomares Год назад

muchas gracias!! siempre intento hacer vídeos que lo que enseñé perdure en el tiempo!!

@qhapaqyachaq6768 3 года назад

Gracias por compartir y enseñar

@qhapaqyachaq6768 3 года назад

Acabo de notar que el slider tapa mis submenus cuando deslizo el mouse por uno de los menus haciendo que no se puedan visualizar :( alguna solucion? xD

@manolopajaro_videos5894 3 года назад

Excelente KIko yo utilizaba java script pero así esta mucho mejor mas simple me suscribo a tu pagina

@kikopalomares 3 года назад

me alegro que te haya gustado Manolo! bienvenido!! =D

@rafaelsantiago5399 2 года назад

Muchas Gracias!!!!

@jcare07 3 года назад

Excelente!!!

@margothernandez7301 Год назад

Muchas gracias ^^ explicas muy bien

@kikopalomares Год назад

gracias!

@MrEduleon78 3 года назад

Gracias por la explicación, en forma sencilla me ha servido de mucho, solo quisiera saber como hacer para que las imagenes cubran todo el espacion del container, y el menu quede dentro de la imagen? Gracias de antemano

@TollingwithmalziMalzi1 2 года назад

Una pregunta Kiko alguno que me pueda ayudar, cuando el usuario da clic para seleccionar la imagen que desea ver hace un scroll hacia abajo dejando el slider de primeras, eso como lo puedo quitar?, muchas gracias de antemano

@demejillonesconamor9121 Год назад

U gotta make it look so easy, thx bro!

@elisiumcosmos7600 Год назад

Sr..Kiko...gracias por su tiempo.y dedicación....comentar...ke en el caso..de slider cuando no tiene transplante o animaciones va bien...todos sin js...ahora nos fuimos a ja..por los transplante con serruchos...trankasos...con sVG files...etc....velocidad de descarga... etc......nos podría ayudar con algún comentario ...gracias...

@alejandrorios6999 Год назад

Gracias crack!

@franciscojaviermartinmedin7315 2 часа назад

Muy buen video, gracias.

@musipiano01 4 года назад

Excelente! 💪

@kikopalomares 4 года назад

gracias!! 😁

@nalsitlanxitumul574 4 года назад

Exelente. Gracias

@kikopalomares 4 года назад

💪

@dantenicolascaballero7703 11 месяцев назад

Gracias genio!! Impagable!!

@AlvisMiguelValerio 3 года назад

Eres el mejor, tienes mi like, mi comentario y mi suscripcion.

@kikopalomares 3 года назад

muchas gracias!! 😁

@christianboy8034 Год назад

grande kiko !

@GuadalupeVazquez-vz4mx 3 года назад

Gracias!!!

@brendalara2980 3 года назад

Gracias! Genio!

@kikopalomares 3 года назад

😬

@NataliaRodriguez-mj8ft 4 года назад

Me quedo bien padre gracias 🙂

@kikopalomares 4 года назад

💪

@firegreen5647 3 года назад

Gracias amigo me fue de bastante ayuda para mi proyecto de fin de curso 😊😊

@kikopalomares 3 года назад

genial!!! me alegro!! 😁

@firegreen5647 3 года назад

@@kikopalomares 😎😎😎😎😎😝😝😝😝😝😜😜😜😜😜🤑🤑🤑🤑🤑

@vaniaelizabethcardenasandrade Год назад

muchas gracias!!!!!!!

@FrankGP.com. 2 года назад

woww sos un genio!

@kikopalomares 2 года назад

muchas gracias!! 😬

@rogeliocastillosoriano9161 2 года назад

Muy bueno 😃

@rafaelquevedo4412 3 года назад

Excelente video

@kikopalomares 3 года назад

muchas gracias!! 😁

@aaronaguilera7343 3 года назад

Se agradece

@yandriguerrero2759 4 года назад

Muy bueno me ha gustaDo

@kikopalomares 4 года назад

Me alegro!!! 😁

@LuisMaitu 2 года назад

Muchas gracias, lo acabo de ver y me gusto, solo quisiera saber como automatizarlo. osea que las imágenes corran sin intervenir con los botones, gracias nuevamente

@manuelcarranza670 2 года назад

CAPOOOOOOOOOOOOOOOOOOO IDOLOOOOO GNIO MASTER

@miltondejesuscoria4450 2 года назад

Buenas, tengo una consulta. Cuando selecciono el menú del slider, la página web se dirige hacia abajo. ¿Alguien sabe cómo se puede hacer para que cuando seleccione el slider, la página se mantenga en su lugar? Gracias de ante mano.

@alejandrotorres3290 Год назад

mm ¿talvez pusiste mal el href de algun item del menu y en lugar de tomar la imagen te manda al id de un item que se encuentra al final de la pagina? :/

@andreald216 2 года назад

Hola! Me encantó. Super útil la info. Es la primera vez q veo un video tuyo y la verdad es que lo haces ver tan fácil! Gracias Kiko!! qué tamaño recomnedas q tengan las fotos para el slide?? Muchisimas gracias!

@kikopalomares 2 года назад

genial! me alegro!! El tamaño de las fotos dependerá de donde lo vayas a usar, si es de la resolución que tenga el div contenedor de la imagen mejor

@estebanduquegomez2712 3 года назад

yo al clickear el numero se me desplaza hacia abajo y se ve muy poco de la imagen

@wagnerretana4190 3 года назад

hay alguna diferencia para los que usamos visual studio code, pregunto ya que hice los pasos de la misma forma en que se hicieron y no obtuve el resultado deseado gracias.

@anticristo1299 4 года назад

Buen video

@jdr504 3 года назад

Muchisimas gracias bro!!! 💗💗💗💗💗

@kikopalomares 3 года назад

😉

@pablomorales9840 3 года назад

Hola Kiko estupendo video, estaba intentando colocar el Slider en mi Hosting de Wordpress pero no veo donde está el apartado para el CSS como podría agregarlo en este caso, anticipadamente Gracias, Saludos

@ValeriaMartinez-yd9ql 3 года назад

ni a mi profe le entendí tanto ;v

@josegato520 3 года назад

hola como le hago para pone vaias imágenes en slide1 por ejemplo osea quiero varias imagenes en una sola slide . no se si me explico ??

@DemianKaos 4 года назад

Hola. ¿y para blogger tendrías un ejemplo? Estoy buscando un slider para entradas recientes de blogger que funcionen pero están desactualizadas.

@paolocarrillo7791 2 года назад

Que grande man, salu3

@alejandroportales1461 2 года назад

necesito ayuda: he creado un slider gracias a tu codigo pero en cada viñeta he colocado una imagen que actua como enlace. Sin embargo siempre se habre el enlace de la ultima imagen. ¿Alguien que me pueda ayudar? Gracias.

@vl3x27 4 года назад

buenas, y si quiero darle un interval para que a la vez sea un slider automatico, como podria aplicarlo a este mismo codigo?

@equintar 3 года назад

No conocía la propiedad o modificador TARGET. Tan solo una puntualización: ¿no habría que devolver el opacity a cero en los no target, o es que lo hace automáticamente recuperando la configuración inicial del CSS?

@hectorcayupe9153 3 года назад

como puedo cambiar de posición al slider? que se pueda ver mas abajo o mas arriba o mas a un lado? disculpa soy nuevo en esto

@alejomarroni3675 3 года назад

Kiko cuando agrando las imagenes el menu de 1/2/3 se me pone en el medio de la imagen y nose como es que lo ajustaste justo debajo de la imagen

@erismeirishidalgoreyes656 4 года назад

wowo wow wowo Excelente, además de que explicas super bien.

@kikopalomares 4 года назад

Muchas gracias!! =D

@acuarianaacua2 3 года назад

@@kikopalomares se puede hacer un reproductor en html5 kiko

@lizbethcastro942 2 года назад

Hola, me gustó mucho este vídeo, pero como podría hacerlo si tengo tarjetas con efecto hover y agruparlas de 3 en 3 y se muevan con botones

@phalcom95 3 года назад

Excelente explicación pero tengo una duda, si solo quisiera que sean flechas y que vayan cambiando? Es decir una flecha para que vaya a la derecha y otra a la izquierda

@nicolesoares6249 2 года назад

hola, hay alguna manera que despues de determinados segundos se mueva sola la imagen?

@granpez99 4 года назад

Hola, primero sos un genio. Una duda, utilice tu ejemplo para que cuando selecciones un slider a esa imagen seleccionadar usarla como imagen para redireccionar a otra url pero con el estilo de css no redirecciona pero si quito el estilo si redirecciona. Tenes idea de por que? o si se puede solucionar?