.slider {
margin: auto;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.slider ul {
width: 400%;
/* mas imagenes mayor el % 100+*/
height: 500px;
display: flex;
list-style: none;
overflow: hidden;
order: 1;
transition: all 0.9s;
animation: slider 20s infinite;
}
.slider ul li img {
background-size: 100% 100%;
}
input[type="radio"] {
display: none;
}
input[type="radio"]+label {
display: block;
width: 10%;
height: 120px;
cursor: pointer;
order: 2;
}
input[type="radio"]+label:hover {
transition: .3s;
opacity: .7;
}
#sbutton1+label {
background: url(http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg);
background-size: 100% 100%;
}
#sbutton2+label {
background: url(https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg);
background-size: 100% 100%;
}
#sbutton3+label {
background: url(http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg);
background-size: 100% 100%;
}
#sbutton4+label {
background: url(http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg);
background-size: 100% 100%;
}
#sbutton1:checked~ul {
margin-left: 0;
animation: none;
}
#sbutton2:checked~ul {
margin-left: -100%;
animation: none;
}
#sbutton3:checked~ul {
margin-left: -200%;
animation: none;
}
#sbutton4:checked~ul {
margin-left: -300%;
animation: none;
}
@keyframes slider {
0%,
20% {
margin-left: 0;
}
25%,
40% {
margin-left: -100%;
}
45%,
70% {
margin-left: -200%;
}
72%,
100% {
margin-left: -300%;
}
}
<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="http://i2.cdn.turner.com/money/dam/assets/141001144835-innovative-cities-philly-1024x576.jpg"></li>
<li><img src="https://b.fastcompany.net/multisite_files/coexist/imagecache/1280/poster/2012/11/1680856-poster-1280-10-smartest-european-cities-shutterstock-78340003-1.jpg"></li>
<li><img src="http://www.worldatlas.com/r/w728-h425-c728x425/upload/d9/63/b0/most-populous-cities-in-oceania.jpg"></li>
<li><img src="http://media.cntraveler.com/photos/57adedf97516fb180520de91/16:9/w_1024,c_limit/friendliest-burlington-GettyImages-157614212.jpg"></li>
</ul>
</div>
como puedo adaptar el width
de cada imagen al 100% y el height
al 100% de igual forma es decir que solo la parte de las miniaturas quede en la parte de abajo y las imagenes ocupen toda la pantalla.