Slider manual N° 1 HTML y CSS
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Primer slider manual con HTML y CSS
Síguenos en facebook:
/ jygproyectosweb
Únete a nuestro grupo:
/ 1639298496227219
Síguenos en Twitter:
/ jygproyectosweb
Nuestro sitio oficial:
Apóyanos con un me gusta y compartiendo este video, nos ayudas muchísimo, gracias a todos :)
![💙 Cómo hacer un slider en HTML y CSS [Código para copiar]](http://i.ytimg.com/vi/i9Yut6Dm9pI/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 76 | คู่เอก "ผึ้งหลวง vs สมิงดำ"](http://i.ytimg.com/vi/9SBshmGQOIM/mqdefault.jpg)
Fantástico, no solo el proyecto sino como lo explicas. Directo y claro. Muchas gracias por compartir tu tiempo y conocimientos.
te doy like antes de ver tu video, eres un capo para explicar. Gracias
Mi hermano no dejas de sorprenderme.
Excelente video. Las mejor explicaciones que me dieron hasta el momento. Gracias y esperamos más videos!
Definitivamente sos un capo!!
gracias amigo boliviano por tanto, aunque no me copie directo del css me ayudo para orientarme, saludos y que tengas un buen dia ;)
Soy peruano
Muchas Gracias!! Excelente explicación
Excelente video, bien explicado. Felicidades e infinitas gracias por tu aporte.
¡simplemente es un máster!
¡eres un crack! gracias, saludos desde Venezuela.
Gracias muy bueno me han quedado claros varios conceptos. Muchas gracias.
Explica mejor que mi instructor que nos mete dizque flex slider sacado de internet.
Eres excelente explicando un abrazo
Gracias Master me re sirvió, un Saludo!!
Excelente tutorial... Gracias
gracias por subir videos como este
hola, la verdad que son excelentes tus vídeos,!!! muchas gracias por los tutoriales :D
son geniales tus tutoriales!!!
MUCHISIMAS GRACIAS
muy bueno...te felicito
Muy bueno, funciona perfecto, muchas gracias.
muy buen video, gracias
Gracias!!! :o :) me has enseñado una forma mas facil de hacer los slider y por fin entiendo bien los label XD :3
Esperando mas.
Gracias por compartir
+Neri Rodriguez a ti por vernos :)
Gracias por el video.
Gracias amigo!!!
Eres un crack saludos
De que parte de Europa eres? Me gustan mucho tus videos 😁😁
Superlike!!!
amigo se puede hacer uno con flechas
?
EN SERIO ERES EL MEJOR, HUBIERA PREFERIDO PAGARTE A TI EN VEZ DE UN INSTITUTO.
Gracias!! El CSS es súper poderoso.
Los atajos de emmet me marean... un tutorial sobre eso no vendría nada mal... buen video! como siempre al grano!
+Marvin Carrasco estamos preparando uno :) en su documentación encuentras todo lo necesario, pero ya haremos uno.
Primero se agradece ! me funciono a la primera.
Pero también quiero colocar un fondo a la pagina, pero no me funciona
Hola, me ha servido de mucho el tutorial. ¿Cómo se puede agregar un div con texto en cada imagen?, Lo estoy intentando pero se enciman los textos ya que no se ocultan y no cambian al hacer la transición como las imágenes. De antemano gracias por la ayuda y por compartir tus conocimientos.
hola,que puedo hacer si quiero que al darle click en la imagen esta cambie a otra
Hola, un saludo desde México. Llegue hasta tu canal debido a que me estoy auto capacitando en desarrollo web desde hace algunas semanas , tus videos me han sido muy útiles. Agradezco me puedas ayudar con la siguiente duda: ¿Cómo puedo acomodar imágenes de distintos tamaños en el contenedor sin que se altere la imagen?, aunque no rellene por completo el contenedor. Ojala me puedas ayudar.
explicas muy bien, solo que hay una cosa que no entiendo en
.slider input[type="radio"] + label{
position: relative;
margin: 0px 3px;
z-index: 50;
}
no entiendo muy bien el porque de la instrucción "position:relative" aquí
ya que sin ella no funciona el label y se oculta pero no entiendo porque
Hola quisiera saber como hacer que mi slider tenga un cuadro
Buenas noches, muy buen tutorial, pero tengo un problema, tengo una cabecera fija y al poner position absolute al hacer scroll la cabecera queda debajo.
genial!! muchas gracias! como podria hacer que se pasen en un determinado tiempo? si tenes algun tuto para eso seria de gran ayuda! un saludo
Hola, muchas gracias por tus tutoriales. ¿Como puedo agregar un texto diferente a cada imagen y agregar un botón siguiente de redireccionamiento a la última imagen del slider? Es para un proyecto de app movil. Desde ya muchas gracias nuevamente. Saludos.
Gracias, me fue muy util. La unica cosa es que no me funciona el label..?
mi hermano , ese slide le funciona al deslizar con celulares?
Hola, gracias! con qué atajo escribiste simultaneamente en las etiquetas ;)
Ayuda pls yo tengo puesto antes de este slider un menu desplegable y se une con el slider como los separo ayuda porfavor
Oye una pregunta ¿se puede hacer ese slider remplazando las imágenes por una división?
Porfa ayúdenme
Hola disculpa como hago para que este slider también se mueva solo al pasar algunos segundos?
segui paso a paso tu tutorial pero las imagenes me quedan una debajo de la otra, como lo soluciono?
Disculpa la coloque en otra pagina y como puedo centrarlo
buena tarde
amigo como hago para que el slider me ocupe el ancho de la página en horizontal, y no en vertical?
Saludos! primero que nada mis felicitaciones. Tus tutoriales son excelentes!
Estoy haciendo la sección de testimoniales, por lo que me gustaría saber cómo hago para que el slider sea automático pero tenga la función de seleccionar una imagen, como en este, es decir una mezcla de ambos sliders, me expliqué?
Gracias! :)
+Angélica Tovar Sánchez el slider más completo que tenemos es th-cam.com/video/6LISZ6roKog/w-d-xo.html
Hay manera de que el slide se reproduzca automáticamente al cargar la página?
Con javascript puedes cambiar automaticamente el atributo checked en el codigo HTML. :)
Por favor explica como hacerlo! :)
Hola, de igual forma estoy buscando la forma para que se reproduzca solo, encontraste la manera?
¿Cómo se podría hacer esto pero con videos de youtube? Y que una pequeña imagen de cada video quedase en la parte de abajo.
Holaa, oye tengo un problema, cuando tengo escrito "" no me funciona, es como si el css solo de este slide no se cargara, y ya vi el codigo en el navegador y pues si esta, y cuando quito la etiqueta la pagina se ve perfecto, sabes por que ocurre esto? saludos, aprendo mucho viendo tus videos!!
No me agarro, los botones siguen abajo de las imagenes, cree que es porque lo hice en dreamweaver, necesito ayudaaa.):
hola amigo como estas sigo tu vídeo y están chevere, seguí tu vídeo al pie de la letra y no me funciono, no se si a cambiado algo en los navegadores desde que hiciste este vídeo, 1. los puntos no se quita en el slider, osea el list-style va dentro de .slider ul{}. 2.otra cosa también alli adentro va el display:flex; 3. y dentro .slider va también el display:flex(para poder mover los radios y label con justify_content y align-items si no no funciona). solo quería acotar eso del resto todo bien. saludos
hola, como puedo poner un link en la imagen para que me mande a otra pagina?
Como hago para que sea aumtomatico
Es responsive?
¿Alguien sabe por que no se me escala la imagen, se deforma completamente cuando quiero poner el alto y ancho en 100% en lugar de pixeles? Gracias.
body{
margin: 0;
background: #fff;
display: flex;
min-height: 100vh;
}
.slider{
width: 800px;
height: 500px;
margin: auto;
position: relative;
list-style: none;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
.slider img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.7s;
}
.slider input[type= "radio"]{
display: none;
}
.slider input[type= "radio"]:checked~ img{
opacity: 1;
}
.slider input[type= "radio"] + label {
position: relative;
z-index: 50;
margin: 10px;
display: block;
width: 20px;
height: 20px;
background: white;
border-radius: 50%;
border: 2px solid black;
cursor: pointer;
}
.slider input[type= "radio"]:checked + label{
background: black;
border: 2px solid white;
}
Por favor podría enseñar como centrar en el header el slider? Logré colocarlo en el header ´pero no puedo centrar y debo colocar el logo también. Gracias si alguien me puede ayudar.
hola! en dreamweaver no me lo centra y cuando clickeo en la 4ta imagen, se me queda activada la ultima imagen... idea de qué puede llegar a pasar?
Espero ya hayas cambiado a un editor de còdigo ;)
Nunca funciona mi pseudo clase checked, no cambia de imagen
con Alt 126 selecciona el simbolo hermano ~, ese es el truco para que salga bien...
hola buenas noches, allí tu mencionas un (ALT126) para sacar el llamado hermano, tu sabes como puedo sacarlo en mi computado. pues la mia es una mac book.
+Lorena Rivera nunca he usado Mac, pero el signo es este: ~ cópialo
+J&G Proyectos Web gracias..
+J&G Proyectos Web una pequeña pregunta mas fijate que estuve siguendo tus pasos de este tutorial y todo el cuadro me quedo muy arriba ?? que hago?
No me aparecen las imagenes
Hola, una consulta. Cómo hago para que sea responsive?
+Daniel Hernández en vez de darle el ancho en pixeles dáselo en porcentajes
+J&G Proyectos Web si, probe pero en monitor me queda la imagen chata; o sea q se deforma y en tamaño para movil me queda muy alta tambien deformada y los input por fuera de cuadro
+Daniel Hernández gracias! sos un sabio!!
una pregunta, cuando quiero seleccionar la siguiente imagen la que esta marcada sigue de ese modo y no me deja desmarcarla, no se que procede hay tengo igual esa parte del codigo al tuyo y queria saber si podrias ayudarme
+Eric Alberto Hola Eric pon tu código en codepen y comparte el link
+J&G Proyectos Web mira este es el codigo
.slider{
width: 500px;
height: 300px;
margin: auto;
position: relative;
padding: 0;
display: flex;
justify-content:center;
align-items:flex-end;
list-style: none;
}
.slider img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.7s;
}
.slider input[type="radio"]{
position: relative;
z-index: 50;
margin: 10px;
}
.slider input[type="radio"]:checked ~ img{
opacity: 1;
}
en codepen se puede ver mejor... copia tu codigo en codepen y comparte el link
codepen.io/niwichis/pen/NxLerE
no se si se vera asi pero hay esta el link espero y se pueda visualizar
+Eric Alberto Hubieras puesto solo lo del slider, te comparto el codepen de este video para que lo revises: codepen.io/JyGProyectosWeb/pen/yexGde?editors=1100
hola me puedes ayudar?
Me gustan muchos tuturoriales, amigo como hacer para cambiar en el minuto 1:26 todos esos textos al mismo tiempo por radio, muchas gracias y un abrazo desde Colombia.
+Jorge Mario Hola Jorge, uso el atajo Ctrl + B, en brackets para seleccionar textos iguales.
+J&G Proyectos Web en mi computadora y teclaro funciona con Ctrl + D
Y el codigo man????
hola podrías hacer un slider estilo estado de wathsaap?
NO FUNCIONA OSEA LAS IMAGENES NO CAMBIAN:(
algo tiene que estar mal porque no funciona
No le entiendo vas muy rápido hazlo paso a paso desde que abres sublime text 😬