CSS Slideshow senza JS e JQUERY

[z.cristiano]

Buongiorno,
ho trovato su GOOGLE questo fantastico script CSS che permette di fare SLIDESHOW molto veloce ma un dubbio che non riesco a risolvere...

Sotto trovi il codice HTML e CSS e funziona benissimo però se mettessi 10 JPG non me lo fa fare e si mischia, sotto vedo che si possono vedere solo 3 immagini, ma se volessi mettere 10 o tanti immagini, c'è qualcosa che va impostato?
Magari devono essere illimitati e non per forza solo 3...

<style>

.slider-container {
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}

.image-container {
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}

#slider-image-1:target ~ .image-container
{
left: 0px;
}

#slider-image-2:target ~ .image-container
{
left: -800px;
}

#slider-image-3:target ~ .image-container
{
left: -1600px;
}

.button-container {
position: relative;
top: -20px;
}

.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}

</style>

<div class="slider-container">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<div class="image-container">
<img src="1.jpg" class="slider-image" />
<img src="2.jpg" class="slider-image" />
<img src="3.jpg" class="slider-image" />
</div>
<div class="button-container">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
</div>
</div>

 

[zabitmrw]

CIao,
c'è qualche documentazione dei js jquery che utilizza? cosi possiamo vedere.

 

[Max 1]

@z.cristiano