Slider manual N° 1 HTML y CSS
Вставка
- Опубліковано 18 вер 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]](/img/n.gif)
te doy like antes de ver tu video, eres un capo para explicar. Gracias
Fantástico, no solo el proyecto sino como lo explicas. Directo y claro. Muchas gracias por compartir tu tiempo y conocimientos.
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
Excelente video. Las mejor explicaciones que me dieron hasta el momento. Gracias y esperamos más videos!
Definitivamente sos un capo!!
Mi hermano no dejas de sorprenderme.
Excelente video, bien explicado. Felicidades e infinitas gracias por tu aporte.
¡simplemente es un máster!
Muchas Gracias!! Excelente explicación
Eres excelente explicando un abrazo
¡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.
gracias por subir videos como este
Gracias Master me re sirvió, un Saludo!!
Excelente tutorial... Gracias
hola, la verdad que son excelentes tus vídeos,!!! muchas gracias por los tutoriales :D
son geniales tus tutoriales!!!
Gracias!!! :o :) me has enseñado una forma mas facil de hacer los slider y por fin entiendo bien los label XD :3
Muy bueno, funciona perfecto, muchas gracias.
muy buen video, gracias
MUCHISIMAS GRACIAS
muy bueno...te felicito
Superlike!!!
De que parte de Europa eres? Me gustan mucho tus videos 😁😁
Gracias por compartir
+Neri Rodriguez a ti por vernos :)
Gracias!! El CSS es súper poderoso.
Eres un crack saludos
EN SERIO ERES EL MEJOR, HUBIERA PREFERIDO PAGARTE A TI EN VEZ DE UN INSTITUTO.
Gracias por el video.
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.
Esperando mas.
Gracias amigo!!!
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.
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.
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, 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.
Primero se agradece ! me funciono a la primera.
Pero también quiero colocar un fondo a la pagina, pero no me funciona
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
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 ua-cam.com/video/6LISZ6roKog/v-deo.html
amigo se puede hacer uno con flechas
?
hola,que puedo hacer si quiero que al darle click en la imagen esta cambie a otra
Hola, gracias! con qué atajo escribiste simultaneamente en las etiquetas ;)
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.
Gracias, me fue muy util. La unica cosa es que no me funciona el label..?
Hola disculpa como hago para que este slider también se mueva solo al pasar algunos segundos?
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?
Oye una pregunta ¿se puede hacer ese slider remplazando las imágenes por una división?
Porfa ayúdenme
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
¿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.
buena tarde
amigo como hago para que el slider me ocupe el ancho de la página en horizontal, y no en vertical?
Hola quisiera saber como hacer que mi slider tenga un cuadro
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!!
Ayuda pls yo tengo puesto antes de este slider un menu desplegable y se une con el slider como los separo ayuda porfavor
mi hermano , ese slide le funciona al deslizar con celulares?
segui paso a paso tu tutorial pero las imagenes me quedan una debajo de la otra, como lo soluciono?
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 agarro, los botones siguen abajo de las imagenes, cree que es porque lo hice en dreamweaver, necesito ayudaaa.):
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 ;)
¿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;
}
Disculpa la coloque en otra pagina y como puedo centrarlo
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
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, como puedo poner un link en la imagen para que me mande a otra pagina?
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.
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, 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!!
Es responsive?
hola podrías hacer un slider estilo estado de wathsaap?
No me aparecen las imagenes
hola me puedes ayudar?
Y el codigo man????
algo tiene que estar mal porque no funciona
NO FUNCIONA OSEA LAS IMAGENES NO CAMBIAN:(
No le entiendo vas muy rápido hazlo paso a paso desde que abres sublime text 😬
Como hago para que sea aumtomatico