Crear un Slider puede llegar a volverse complicado, sobretodo si el no sabemos con seguridad cuantas imagenes vamos a colocar.
Podria ser facil usar javascript, pero el objetivo de este tutorial es no hacerlo.
Vamos a ver un Slider adaptable y al cual se le puede añadir multiples imagenes sin la necesidad de modificar el css. He aqui un Ejemplo:
El HTML:
<div class='slider'>
<input id='img-1' type="radio" name="slider-1" checked>
<div class="content">
<label for="img-3"></label>
<img src="imagen1.png" alt="">
<label for="img-2"></label>
</div>
<input id='img-2' type="radio" name="slider-1">
<div class="content">
<label for="img-1"></label>
<img src="imagen2.png" alt="">
<label for="img-3"></label>
</div>
<input id='img-3' type="radio" name="slider-1">
<div class="content">
<label for="img-2"></label>
<img src="imagen3.png" alt="">
<label for="img-1"></label>
</div>
</div>