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>

El CSS:

.slider{
	position: relative;
	width: 600px;
	height: 400px;
	margin: auto;
}
.slider input[type=radio]{display: none;}
.content{
	position: absolute;
	width: 100%;
	height: 100%;
}
.content img{
	position: absolute;
	width: 0;
	height: 100%;
	right: 0;
	transition: 150ms;
}
input[type=radio]:checked + .content img{
	width: 100%;
	right: auto;
	transition: 150ms;
}
.content label{
	display: none;
	position: absolute;
	color: #FFF;
	font-size: 45px;
	width: 40px;
	height: 100%;
	z-index: 99999;
}
input[type=radio]:checked + .content label{
	display: table;
}
.content label:last-child{
	top: 0;
	right: 0;
}
.content label:before{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	content: '<';
}
.content label:last-child:before{
	content: '>';
}

¿Como Funciona?

Para empezar obsevemos el siguiente codigo:

<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>

Esto funciona colocando un input radio seguido de un div clase "content".

Cuando el input este seleccionado la imagen que esta dentro del "content" cambiara su ancho al 100% y las demas se ocultaran.

Finalmente podemos añadir el siguiente css opcionalmente para evitar el seleccionado de la imagen:

img::selection{
	background: none;
}
img::-moz-selection{
	background: none;
}

slider, carousel, imagenes, slider solo css, slider css, slider sin javascript