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