Muchisimas gracias, llevaba buscando bastante tiempo quien me explicara de manera facil y sencilla como usar un slider para no tener que usar framework.
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
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
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? :/
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 ;)
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
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
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
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
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
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.
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...
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
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
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?
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!
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.
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.
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
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 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...
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 !
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
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.
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?
![⚡ Respondo a un HATER 😡 Creando el SLIDER perfecto en HTML y CSS [Código Mejorado para copiar]](/img/n.gif)
Versión MEJORADA del SLIDER gracias a un HATER 👉 ua-cam.com/video/vD42cs2fAo8/v-deo.html
no todos los heroes llevan capa
Eres muy bueno en lo que haces. Gracias por tu apoyo. Bendiciones
CURSO GRATIS de CSS 👉👉 bit.ly/3tf6OMW
Muy generoso de tu parte. Gracias gracias!! 👍👍👍
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..
Mis felicitaciones y agradecimientos por este material que nos proporcionas. Muy bueno, sencillo y muy bien explicado.
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!! 😬
Hace falta mas gente como vos. Gracias
no he visto aun la version mejorada pero este video me ha encantado!!!!
muy buen video, llevaba un tiempo buscando un video que explicara como hacer un slider de forma sencilla, muchas gracias!
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
Eres un crack, me has ayudado muchisimo en mis estudios
que grande eres hermano, me sirvió de mucho unas cuantas modificaciones y tengo justo lo que busco
Que buen video. Sencillo, al grano y efectivo :D
sos un crack!!! mil gracias por tu aporte!!!
Amé tu trabajo
fácil de entender
lo usaré para un proyecto final
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!! 😁
Muchas gracias, fuiste muy claro. ♥
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
Buen video, funciono el slider a la perfección
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? :/
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!!
MUY BUENO Y MUY BIEN EXPLICADO 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
Eres un genio!!! Mil gracias por tu aporte.
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
muchisimas gracias me has ayudado un monton!!!! LIKE
Eres un genio Kiko. Muchas gracias profesional, puntual y bien explicado. Eres una As.
muchas gracias por tu comentario!! 😁
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
¡Genial! Muchas gracias por el video.
excelentemente bien explicado.Muchisimas gracias! nuevo follower
bienvenido!! =D
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
Gracias Kiko!
Esta muy bien explicado saludos desde México
Excelente, muy facil de hacer y lo explicaste de 10! Gracias!
muchas gracias! =D
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
Buenísimo para optimización de una página
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
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 UA-cam! 😁
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
Muy bueno! Muchas gracias
que buen video muy explicito justo lo que necesitaba
genial! 💪
Hola!! Muchas gracias por la explicación! Muy claro y preciso!! saludos desde Chile!!
Saludos!! 😁
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.
Gracias amigo me fue de bastante ayuda para mi proyecto de fin de curso 😊😊
genial!!! me alegro!! 😁
@@kikopalomares 😎😎😎😎😎😝😝😝😝😝😜😜😜😜😜🤑🤑🤑🤑🤑
Buenisimo video, explicacion excelennte
Muy buen video, gracias.
que editor utilizas?
hola, hay alguna manera que despues de determinados segundos se mueva sola la imagen?
Muchas gracias, me acabas de salvar en un trabajo final.
Voy a compartir tu vídeo.
Genial!! 😁
Primer video que veo y me encantó la intro lpm
muchas gracias!!! 😁
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...
Muchas gracias ^^ explicas muy bien
gracias!
Gracias crack!
que buen contenido que tenes, ya me suscribi, un saludo desde argentina
genial!! bienvenido!! 😁
Muchas Gracias!!!!
Gracias genio!! Impagable!!
Muy bueno 😃
Excelentes tutos.
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
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
grande Kiko!! gracias a esto la pequeña pagina que estoy haciendo quedará genial jeje
💪
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?
wowo wow wowo Excelente, además de que explicas super bien.
Muchas gracias!! =D
@@kikopalomares se puede hacer un reproductor en html5 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! 😁
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
Eres el mejor, tienes mi like, mi comentario y mi suscripcion.
muchas gracias!! 😁
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.
U gotta make it look so easy, thx bro!
CAPOOOOOOOOOOOOOOOOOOO IDOLOOOOO GNIO MASTER
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
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.
Muchas gracias realmente me ayudo!! :D
Buenas, y si en vez de botones 1, 2, 3 quieres que vaya a la derecha o a la izquierda?
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
yo al clickear el numero se me desplaza hacia abajo y se ve muy poco de la imagen
Se agradece
ni a mi profe le entendí tanto ;v
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?
Esto.
@@LOLMES45CR ZZZ, no va a llegar nunca tu principe azul si no te comportas como una princesa. 😠
pudiste arreglarlo? Me pasa exactamente eso
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, 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
Mil gracias por el tutorial, me será de mucha ayuda 👏
genial! me alegro!! 👍
Gracias! Genio!
😬
Porque no funcionan las dentro de los li sliders?
por que es y no :/
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...
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 !
Si se puede, solo agrega mas "slider" y mas menus y queda perfecto, te digo por que yo lo hice 👍
Excelente video
muchas gracias!! 😁
y que codigo uso para que el Slider cambie automaticamente????
gracias muy buen tuto, saludos desde guatemala
hola, me podrias ayudar, sabes donde se aloja la hoja html de un flexslider en una pagina web?
Necesitaría que los botones se oculten cuando estoy en el #slider1 como puedo hacer eso? muchas gracias está muy bien explicado.
Hola. ¿y para blogger tendrías un ejemplo? Estoy buscando un slider para entradas recientes de blogger que funcionen pero están desactualizadas.
que programa ocupas???
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
Gracias!!!
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
Hola, pudiste resolver el problema?
No, me tocó desistir
x2 tengo ese problema alguien ayudaa
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 ??
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.
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?
buenas noches, donde puedo consultar su código por favor