Foros del Web » Creando para Internet » CSS »

No me funciona el slider de una galeria de fotos en modo responsive

Estas en el tema de No me funciona el slider de una galeria de fotos en modo responsive en el foro de CSS en Foros del Web. Hola, soy nuevo aqui, mi problema es de este slider de galeria que no es responsive, quisiera saber en que parte o que codigo se ...
  #1 (permalink)  
Antiguo 05/02/2016, 18:23
 
Fecha de Ingreso: febrero-2016
Ubicación: Lima
Mensajes: 1
Antigüedad: 8 años, 1 mes
Puntos: 0
Pregunta No me funciona el slider de una galeria de fotos en modo responsive

Hola, soy nuevo aqui, mi problema es de este slider de galeria que no es responsive, quisiera saber en que parte o que codigo se tendra que adicionar en el css.

Aqui el codigo:

EL HTMLl:

<div class="slider">

<input type="radio" id="sbutton1" name="sradio">
<label for="sbutton1"></label>
<input type="radio" id="sbutton2" name="sradio">
<label for="sbutton2"></label>
<input type="radio" id="sbutton3" name="sradio">
<label for="sbutton3"></label>
<input type="radio" id="sbutton4" name="sradio">
<label for="sbutton4"></label>

<ul>
<li><img src="images/galerias/outdoor/foto01.jpg" alt="foto01"></li>
<li><img src="images/galerias/outdoor/foto02.jpg" alt="foto02"></li>
<li><img src="images/galerias/outdoor/foto03.jpg" alt="foto03"></li>
<li><img src="images/galerias/outdoor/foto04.jpg" alt="foto04"></li>
</ul>

</div>

EL CSS:

.slider{
width: 700px;
height: 360px;
display: flex;
flex-wrap: wrap;
overflow:hidden;
}

input[type="radio"]{
display: none;
}

input[type="radio"] + label{
display: block;
width: 25%;
height: 60px;
cursor: pointer;
order: 2;
border: 1px solid #000;
}

.slider ul{
width: 400%;
height: 300px;
display: flex;
list-style: none;
order: 1;
transition: all 0.9s;
}

#sbutton1 + label{
background: url(images/galerias/outdoor/foto01.jpg);
background-size: 100% 100%;
}

#sbutton2 + label{
background: url(images/galerias/outdoor/foto02.jpg);
background-size: 100% 100%;
}

#sbutton3 + label{
background: url(images/galerias/outdoor/foto03.jpg);
background-size: 100% 100%;
}

#sbutton4 + label{
background: url(images/galerias/outdoor/foto04.jpg);
background-size: 100% 100%;
}

#sbutton1:checked ~ ul {
margin-left: 0;
}

#sbutton2:checked ~ ul {
margin-left: -100%;
}

#sbutton3:checked ~ ul {
margin-left: -200%;
}

#sbutton4:checked ~ ul {
margin-left: -300%;
}

@keyframes slider{

0%, 20%{
margin-left: 0;
}

25%, 40%{
margin-left: -100%;
}

45%, 70%{
margin-left: -200%;
}

75%, 100%{
margin-left: -300%;
}

}

PD: las dimensiones de la foto esta en la clase .slider.

Con estos codigo "SOLO" la figura pequeña es el que se realiza el responsive por que esta en width y height al 100%, en cambio la imagen no y no realiza el responsive.

Seria bueno que me resolviera este problema.

Mas bien otra consulta más, cuando pongo "animation: slider 20s infinite;" en .slider ul, el cursor pointer deja de funcionar, ya que ese slider le converti en "Automatico", seria bueno si me ayudaran. Gracias
  #2 (permalink)  
Antiguo 08/02/2016, 07:52
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 4 meses
Puntos: 39
Respuesta: No me funciona el slider de una galeria de fotos en modo responsive

He usado el código tal cual lo tienes y no se visualiza nada.

Podrías, para ayudarte mejor, colocar el código del slider en codepen.io o jsfiddle para visualizar mejor tu problema.

Ah y por cierto, yo alguna vez hice un slider con puro css, casi que con la misma estructura html que la tuya y es responsive, revisalo aquí:

http://s.codepen.io/g3kdigital/debug/rqvDB

Depronto te sirva.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Etiquetas: background, fotos, galeria, html, modo, responsive, slider, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:32.