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

[@kikopalomares]

Versión MEJORADA del SLIDER gracias a un HATER 👉 kzbin.info/www/bejne/rHWXY5apZ8t0pZo

[@Jose-ub1yp]

no todos los heroes llevan capa

[@kaliman3981]

Eres muy bueno en lo que haces. Gracias por tu apoyo. Bendiciones

[@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..

[@jofresanchez2051]

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

[@Xurdefr11]

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

[@elphslegado7042]

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]

me alegro!! 😬

[@quinojuan2]

Hace falta mas gente como vos. Gracias

[@valerio9851]

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

[@ulisesmak]

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

[@HoyTuMejorVersion]

Eres un crack, me has ayudado muchisimo en mis estudios

[@armandoriosramirez5251]

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

[@DavidRuizfv]

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]

genial!! bienvenido a KZbin! 😁

[@rangarit]

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

[@sandraquevedo5789]

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

[@SkullOwner_]

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

[@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!!

[@kikopalomares]

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

[@profedavid5846]

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

[@andrearivera7065]

Muchas gracias, fuiste muy claro. ♥

[@gabiper223]

Gracias Kiko!

[@frxngb]

Buen video, funciono el slider a la perfección

[@anakarenortizcovarrubias8770]

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

[@V1-172wxwxwxwxwxwxwxxw]

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

[@joseandresurbanomujica9564]

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

[@securecodingdevelopment5023]

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

[@josemejias081]

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

[@maxiagustin6529]

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

[@kikopalomares]

Muchas gracias!! 😁

[@maurogastonherrera7727]

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]

gracias por tu comentario! saludos!! =D

[@anakarina74]

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]

muchas gracias y bienvenida!!! =D

[@MyTvNetEs]

Esta muy bien explicado saludos desde México

[@davidtessore9700]

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

[@kikopalomares]

genial!! bienvenido!! 😁

[@firegreen5647]

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

[@kikopalomares]

genial!!! me alegro!! 😁

[@firegreen5647]

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

[@valeriaandino5849]

Muy bueno! Muchas gracias

[@profedavid5846]

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

[@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...

[@isaacvillalobos3037]

Buenisimo video, explicacion excelennte

[@eribertmarquez452]

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

[@echateunfifita]

Muy buen video, gracias.

[@salvadorvillegas4612]

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

[@kikopalomares]

muchas gracias por tu comentario!! 😁

[@ldh5764]

excelentemente bien explicado.Muchisimas gracias! nuevo follower

[@kikopalomares]

bienvenido!! =D

[@mariacarriong]

MUY BUENO Y MUY BIEN EXPLICADO GRACIAS!!

[@rogeliocastillosoriano9161]

Muy bueno 😃

[@margothernandez7301]

Muchas gracias ^^ explicas muy bien

[@kikopalomares]

gracias!

[@manuelcarranza670]

CAPOOOOOOOOOOOOOOOOOOO IDOLOOOOO GNIO MASTER

[@mto8a]

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

[@julianvegamunoz2321]

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

[@kikopalomares]

Saludos!! 😁

[@TollingwithmalziMalzi1]

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

[@novoti43]

¡Genial! Muchas gracias por el video.

[@uflorez29]

que buen video muy explicito justo lo que necesitaba

[@kikopalomares]

genial! 💪

[@alejandrorios6999]

Gracias crack!

[@dantenicolascaballero7703]

Gracias genio!! Impagable!!

[@RubiolaYankee]

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

[@kikopalomares]

muchas gracias! =D

[@wonkaademon]

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

[@kikopalomares]

Genial!! 😁

[@miltondejesuscoria4450]

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? :/

[@LuisMaitu]

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

[@rafaelsantiago5399]

Muchas Gracias!!!!

[@paolocarrillo7791]

Que grande man, salu3

[@agusrezett6109]

Primer video que veo y me encantó la intro lpm

[@kikopalomares]

muchas gracias!!! 😁

[@FrankGP.Systems]

woww sos un genio!

[@kikopalomares]

muchas gracias!! 😬

[@DaniiTheFox]

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]

Muchas gracias, te amo

[@acsynth4942]

Excelentes tutos.

[@martin-cm9sw]

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

[@kikopalomares]

💪

[@andreald216]

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]

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

[@qhapaqyachaq6768]

Gracias por compartir y enseñar

[@qhapaqyachaq6768]

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]

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

[@kikopalomares]

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

[@JavierMarinSuaza]

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

[@kikopalomares]

muchas gracias Javier! 😁

[@demejillonesconamor9121]

U gotta make it look so easy, thx bro!

[@wagnerretana4190]

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.

[@AlvisMiguelValerio]

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

[@kikopalomares]

muchas gracias!! 😁

[@nicolesoares6249]

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

[@erismeirishidalgoreyes656]

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

[@kikopalomares]

Muchas gracias!! =D

[@acuarianaacua2]

@@kikopalomares se puede hacer un reproductor en html5 kiko

[@pablomorales9840]

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

[@angelfigueroa6662]

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.

[@chorchluks]

genio de la vida! me re salvaste! consulta cuando hago click en los numeros, la pagina se mueve dejando la imagen en el tope superior, hay manera para que eso no pase?

[@erickchavez4551]

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

[@kikopalomares]

genial! me alegro!! 👍

[@Irving_-hx6dd]

Muchas gracias realmente me ayudo!! :D

[@rafaelquevedo4412]

Excelente video

[@kikopalomares]

muchas gracias!! 😁

[@ireneflores4582]

Buenas, y si en vez de botones 1, 2, 3 quieres que vaya a la derecha o a la izquierda?

[@artemiobenitez9359]

que programa ocupas???

[@lizbethcastro942]

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

[@brendalara2980]

Gracias! Genio!

[@kikopalomares]

😬

[@mayadesign]

Hola Francisco (Kiko), un placer saludarte... Creés que el estupendo slider que nos mostraste, cómo hacer... se podrá poner automático? saludos hasta la bellísima España... Y muchísimas gracias por todo lo que nos aportas...

[@esbozzocarrillo4727]

hola, me podrias ayudar, sabes donde se aloja la hoja html de un flexslider en una pagina web?

[@alejandroportales1461]

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.

[@vacosta1206]

kiko como se llama el programa que usaste en el video?

[@Jamers_music]

que editor utilizas?

[@CarolinaHernandez-ri1zh]

buenas noches, donde puedo consultar su código por favor

[@granpez99]

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?

[@estebanduquegomez2712]

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

[@equintar]

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?

[@josegato520]

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 ??

[@anticristo1299]

Buen video

[@deejayhendirgt]

y que codigo uso para que el Slider cambie automaticamente???? gracias muy buen tuto, saludos desde guatemala

[@ValeriaMartinez-yd9ql]

ni a mi profe le entendí tanto ;v

[@-bryanpro950-5]

hola, muchas gracias por el video me ha ayudado mucho, pero tengo un problema y es que lo he usado para hacer una tienda y cuando cambio de imagen, la primera imagen se muestra por la parte de atras, ya que he puesto las imagenes sin fondo osea con fondo transparente, podrias ayudarme por favor. No encuentro la solucion por ninguna parte.

[@phalcom95]

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

[@jcare07]

Excelente!!!

[@aaronaguilera7343]

Se agradece

[@narutohs]

Hola, muchas gracias por la explicación, el codigo me sirve para un proyecto en el que estoy trabajando, una pregunta, ¿sabes como hacer para que no se suba automáticamente cuando doy clic? es que en la pagina donde lo quiero colocar tiene un menú fijo y al darle clic su sube y se oculta detras del menu, muchas gracias

[@pitukpo6]

Hola, pudiste resolver el problema?

[@narutohs]

No, me tocó desistir

[@anonima0162]

x2 tengo ese problema alguien ayudaa

[@hectorcayupe9153]

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

[@RodrigoVillalba]

Porque no funcionan las dentro de los li sliders?

[@alejandrotorres3290]

por que es y no :/