💙 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

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

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

[@kikopalomares]

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

[@profedavid5846]

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

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

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

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

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

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

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

[@armandoriosramirez5251]

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

[@HoyTuMejorVersion]

Eres un crack, me has ayudado muchisimo en mis estudios

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

[@andrearivera7065]

Muchas gracias, fuiste muy claro. ♥

[@joseandresurbanomujica9564]

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

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

[@maxiagustin6529]

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

[@kikopalomares]

Muchas gracias!! 😁

[@gabiper223]

Gracias Kiko!

[@anakarenortizcovarrubias8770]

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

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

[@sandraquevedo5789]

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

[@salvadorvillegas4612]

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

[@kikopalomares]

muchas gracias por tu comentario!! 😁

[@SkullOwner_]

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

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

[@V1-172wxwxwxwxwxwxwxxw]

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

[@frxngb]

Buen video, funciono el slider a la perfección

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

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

[@margothernandez7301]

Muchas gracias ^^ explicas muy bien

[@kikopalomares]

gracias!

[@echateunfifita]

Muy buen video, gracias.

[@mto8a]

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

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

[@mariacarriong]

MUY BUENO Y MUY BIEN EXPLICADO GRACIAS!!

[@firegreen5647]

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

[@kikopalomares]

genial!!! me alegro!! 😁

[@firegreen5647]

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

[@profedavid5846]

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

[@ValeriaMartinez-yd9ql]

ni a mi profe le entendí tanto ;v

[@MyTvNetEs]

Esta muy bien explicado saludos desde México

[@ldh5764]

excelentemente bien explicado.Muchisimas gracias! nuevo follower

[@kikopalomares]

bienvenido!! =D

[@alejandrorios6999]

Gracias crack!

[@davidtessore9700]

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

[@kikopalomares]

genial!! bienvenido!! 😁

[@uflorez29]

que buen video muy explicito justo lo que necesitaba

[@kikopalomares]

genial! 💪

[@valeriaandino5849]

Muy bueno! Muchas gracias

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

[@wonkaademon]

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

[@kikopalomares]

Genial!! 😁

[@dantenicolascaballero7703]

Gracias genio!! Impagable!!

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

[@RubiolaYankee]

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

[@kikopalomares]

muchas gracias! =D

[@isaacvillalobos3037]

Buenisimo video, explicacion excelennte

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

[@julianvegamunoz2321]

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

[@kikopalomares]

Saludos!! 😁

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

[@novoti43]

¡Genial! Muchas gracias por el video.

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

[@rafaelsantiago5399]

Muchas Gracias!!!!

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

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

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

[@demejillonesconamor9121]

U gotta make it look so easy, thx bro!

[@guilleap9553]

Te hago una consulta, soy principiante en esto pero se me ocurre, el ejemplo y la explicación es muy buena (tienes mi like jaja) Pero imaginemos que en lugar de 3 imagenes tenemos 10 o más, es posible hacer en lugar de un item por cada imagen, hacer únicamente dos, es decir, una que muestre el siguiente elemento y otra que muestre el anterior ? Ojala puedas ver mi comentario, saludos !

[@boomwaryt6853]

Si se puede, solo agrega mas "slider" y mas menus y queda perfecto, te digo por que yo lo hice 👍

[@agusrezett6109]

Primer video que veo y me encantó la intro lpm

[@kikopalomares]

muchas gracias!!! 😁

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

[@martin-cm9sw]

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

[@kikopalomares]

💪

[@alejandroc.1082]

Kiko dicen que cuando salga Bootstrap 5 no tendrá jquery ya no dependerá más de esa libreria, será 100% código Vanilla javascript. El framework css más utilizado parece que da un paso importante si esto llega a ser verdad. Cabe resaltar que me gusta hacerlo todo desde cero, pero si bootstrap llega a dar este paso sin duda que le daría una oportunidad. Golpe bajo para jquery, solo falta WordPress que deje de depender de él y la librería sería olvidada poco a poco. Has un video hablando sobre este tema.

[@kikopalomares]

La verdad es que sí, pobre jquery, ha pasado de lo más alto a la nada... me lo voy a apuntar para un vídeo, es un buen tema, 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?

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

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

[@acsynth4942]

Excelentes tutos.

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

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

[@rogeliocastillosoriano9161]

Muy bueno 😃

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

[@aaronaguilera7343]

Se agradece

[@maenoisawa]

hola Kiko muy buena explicación, tengo una una duda y quiera ver si puedes resolverla, como haría para que cuando de click en la imagen se abra en otra pestaña del navegador

[@zulemasanchez9786]

Debes estudiar Enlaces de html.. Suerte..!!

[@jesusd8485]

Muy bueno! El unico asunto que tengo es que al hacer click para cambiar de imagenes la pantalla se baja hasta lo mas bajo. Alguna idea?

[@LOLMES45CR]

Esto.

[@HELLOHOLA-ex3mv]

@@LOLMES45CR ZZZ, no va a llegar nunca tu principe azul si no te comportas como una princesa. 😠

[@zona18cienciaypesca]

pudiste arreglarlo? Me pasa exactamente eso

[@AlvisMiguelValerio]

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

[@kikopalomares]

muchas gracias!! 😁

[@erickchavez4551]

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

[@kikopalomares]

genial! me alegro!! 👍

[@brendalara2980]

Gracias! Genio!

[@kikopalomares]

😬

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

[@deejayhendirgt]

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

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

[@ireneflores4582]

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

[@Irving_-hx6dd]

Muchas gracias realmente me ayudo!! :D

[@manuelcarranza670]

CAPOOOOOOOOOOOOOOOOOOO IDOLOOOOO GNIO MASTER

[@RodrigoVillalba]

Porque no funcionan las dentro de los li sliders?

[@alejandrotorres3290]

por que es y no :/

[@rafaelquevedo4412]

Excelente video

[@kikopalomares]

muchas gracias!! 😁

[@RodrigoVillalba]

Necesitaría que los botones se oculten cuando estoy en el #slider1 como puedo hacer eso? muchas gracias está muy bien explicado.

[@andresramirez6232]

Tengo que dedicarle varios días a esto

[@vacosta1206]

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

[@MyTomol]

Kiko, trabajo mas con diseños que con programacion igual tengo un conocimiento basico de varios lenguajes de promagracion algo que habia pospuesto es hacer una pagina web, ahora me encuentro realizandola e hice tu slider, se super entiender y me ha quedado buenisimo, lo que te queria preguntar es como se puede hacer para que las imagenes se pasen solas en un determinado tiempo SI me puedes orientar un poco te lo agradeceria tio

[@lucasc530]

Supiste cómo hacerlo? xd

[@zona18cienciaypesca]

@@lucasc530 Supiste como hacerlo? xd

[@nicolesoares6249]

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

[@MrEduleon78]

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

[@joseabrahammaciastorres1414]

bro muchas gracias por el contenido, tengo problemas en mi código donde puedo mostrártelo para una sugerencia?, gracias disculpa la molestia

[@DemianKaos]

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

[@GuadalupeVazquez-vz4mx]

Gracias!!!

[@CarolinaHernandez-ri1zh]

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

[@nalsitlanxitumul574]

Exelente. Gracias

[@kikopalomares]

💪

[@paolocarrillo7791]

Que grande man, salu3