💙 Cómo hacer un slider en HTML y CSS [Código para copiar]
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2024
- 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. - วิทยาศาสตร์และเทคโนโลยี
![⚡ Respondo a un HATER 😡 Creando el SLIDER perfecto en HTML y CSS [Código Mejorado para copiar]](http://i.ytimg.com/vi/vD42cs2fAo8/mqdefault.jpg)
Versión MEJORADA del SLIDER gracias a un HATER 👉 th-cam.com/video/vD42cs2fAo8/w-d-xo.html
no todos los heroes llevan capa
Muchisimas gracias, llevaba buscando bastante tiempo quien me explicara de manera facil y sencilla como usar un slider para no tener que usar framework.
Muchas gracias por existir.. mas personas como tú..
Ayudas mucho. Eres un experto en explicar gracias a ti aprendo más. Fácil..
Hace falta mas gente como vos. Gracias
muy buen video, llevaba un tiempo buscando un video que explicara como hacer un slider de forma sencilla, muchas gracias!
que grande eres hermano, me sirvió de mucho unas cuantas modificaciones y tengo justo lo que busco
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
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
me alegro!! 😬
Mis felicitaciones y agradecimientos por este material que nos proporcionas. Muy bueno, sencillo y muy bien explicado.
CURSO GRATIS de CSS 👉👉 bit.ly/3tf6OMW
Muy generoso de tu parte. Gracias gracias!! 👍👍👍
MUY BUENO Y MUY BIEN EXPLICADO GRACIAS!!
no he visto aun la version mejorada pero este video me ha encantado!!!!
Amé tu trabajo
fácil de entender
lo usaré para un proyecto final
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
Buenísimo para optimización de una página
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
Eres un crack, me has ayudado muchisimo en mis estudios
Que buen video. Sencillo, al grano y efectivo :D
Eres un genio Kiko. Muchas gracias profesional, puntual y bien explicado. Eres una As.
muchas gracias por tu comentario!! 😁
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
¡Genial! Muchas gracias por el video.
Eres un genio!!! Mil gracias por tu aporte.
Muchas gracias, me acabas de salvar en un trabajo final.
Voy a compartir tu vídeo.
Genial!! 😁
sos un crack!!! mil gracias por tu aporte!!!
Buen video, funciono el slider a la perfección
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.
gracias por tu comentario! saludos!! =D
Muchas gracias, me acabas de salvar de un examen final :)
Me ah encantado , sos un buen profesional y muy bien explicado el código, muchas gracias
Muchas gracias!! 😁
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
muchas gracias y bienvenida!!! =D
Esta muy bien explicado saludos desde México
Excelente, muy facil de hacer y lo explicaste de 10! Gracias!
muchas gracias! =D
Muchas gracias, fuiste muy claro. ♥
Gracias Kiko!
Muchas gracias por tan excelente video se comprende muy bien, todo super bien explicado,Recomendado totalmente
Saludos y toneladas de Bendiciones
muchas gracias Javier! 😁
Muy bueno! Muchas gracias
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 ;)
Muchas gracias, te amo
excelentemente bien explicado.Muchisimas gracias! nuevo follower
bienvenido!! =D
Hola!! Muchas gracias por la explicación! Muy claro y preciso!! saludos desde Chile!!
Saludos!! 😁
me suscribo y like... te sigo en instagram pero recien me di cuenta que no te seguia en youtube.gracias muy clara explicación
genial!! bienvenido a TH-cam! 😁
Muchas gracias realmente me ayudo!! :D
muchisimas gracias me has ayudado un monton!!!! LIKE
Buenisimo video, explicacion excelennte
que buen video muy explicito justo lo que necesitaba
genial! 💪
Excelentes tutos.
Bien merecido like que te doy, video que aún se mantiene vigente
muchas gracias!! siempre intento hacer vídeos que lo que enseñé perdure en el tiempo!!
Mil gracias por el tutorial, me será de mucha ayuda 👏
genial! me alegro!! 👍
Primer video que veo y me encantó la intro lpm
muchas gracias!!! 😁
grande Kiko!! gracias a esto la pequeña pagina que estoy haciendo quedará genial jeje
💪
Gracias crack!
Muchas Gracias!!!!
ni a mi profe le entendí tanto ;v
Gracias genio!! Impagable!!
Gracias por compartir y enseñar
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
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
Muchas gracias ^^ explicas muy bien
gracias!
muchas gracias!!!!!!!
Excelente!
U gotta make it look so easy, thx bro!
Excelente KIko yo utilizaba java script pero así esta mucho mejor mas simple me suscribo a tu pagina
me alegro que te haya gustado Manolo! bienvenido!! =D
woww sos un genio!
muchas gracias!! 😬
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
Muy bueno 😃
Gracias!!!
que buen contenido que tenes, ya me suscribi, un saludo desde argentina
genial!! bienvenido!! 😁
Gracias amigo me fue de bastante ayuda para mi proyecto de fin de curso 😊😊
genial!!! me alegro!! 😁
@@kikopalomares 😎😎😎😎😎😝😝😝😝😝😜😜😜😜😜🤑🤑🤑🤑🤑
Excelente! 💪
gracias!! 😁
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.
grande kiko !
Eres el mejor, tienes mi like, mi comentario y mi suscripcion.
muchas gracias!! 😁
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.
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
Gracias! Genio!
😬
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...
Exelente. Gracias
💪
CAPOOOOOOOOOOOOOOOOOOO IDOLOOOOO GNIO MASTER
Me quedo bien padre gracias 🙂
💪
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!
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
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?
Se agradece
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
wowo wow wowo Excelente, además de que explicas super bien.
Muchas gracias!! =D
@@kikopalomares se puede hacer un reproductor en html5 kiko
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.
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? :/
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?
Hola. ¿y para blogger tendrías un ejemplo? Estoy buscando un slider para entradas recientes de blogger que funcionen pero están desactualizadas.
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
Excelente video
muchas gracias!! 😁
Que grande man, salu3
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 ??
buenas, y si quiero darle un interval para que a la vez sea un slider automatico, como podria aplicarlo a este mismo codigo?
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
hola, hay alguna manera que despues de determinados segundos se mueva sola la imagen?
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
Muchisimas gracias bro!!! 💗💗💗💗💗
😉
Buenas, y si en vez de botones 1, 2, 3 quieres que vaya a la derecha o a la izquierda?
Buen video
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
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?
Muy bueno me ha gustaDo
Me alegro!!! 😁
yo al clickear el numero se me desplaza hacia abajo y se ve muy poco de la imagen
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...