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
