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 non funziona e 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>

[Vincent.Zeno]

leggendolo con un po' di attenzione si capisce abbastanza facilmente la logica dello script.

fai vedere cosa faresti aggiungendo una sola immagine, così possiamo capire gli errori

[graffithouse]

.slider-container{width:800px;}
.image-container{ width:2400; }

Il problema è in questa parte del codice, .slider-container da la dimensione del box dove si trova l'immagine in questo caso 800px e .image-container invece è di 2400px, se volessi mettere 10 immagini dovresti modificare quest'ultimo parametro moltiplicando per il numero delle foto la larghezza del box.

Se volessi caricare 5 foto devi modificare il codice 800x5=4000
quindi il codice va modificato:

.slider-container{width:800px;}
.image-container{ width:4000; }