Slider immagini con Javascript

[DVX70]

Salve a tutti....
consideriamo l'esempio riportato in questo link:
http://www.html.it/articoli/3647/esempi/livello-3.html
Qualcuno sarebbe così gentile da spiegarmi come poter estendere il codice per n immagini (n>=5) ?
Ho provato con le ovvie aggiunte:

<li>
<imgsrc="img/5.jpg"id="img5"alt=""/></li>

Nella classe "slider" e

<a href="#img5" class="nav_btn">5</a>


nella classe "navigation"; ma al posto della 5° immagine mi visualizza un riquadro vuoto; ovviamente il percorso all'immagine 5.jpg è corretto.
Dove sbaglio ?
Grazie mille per l'aiuto
Deltaelectronics

[cavicchiandrea]

Posta un link alla tua pagina demo pubblica (tuosito.xxxx/paginademopubblicaslide.xxxx)

[KillerWorm]

Ciao. Premetto, quando posti del codice sul forum dovresti fare la gentilezza di usare gli appositi tag di formattazione (vedi info utili nel regolamento interno). Grazie.

Il problema dipende dalla larghezza dell'elemento ul.
Sul foglio di stile livello-3.css per la classe .slider è impostato width: 1920px;

.slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 320px;
    width: 1920px;
}

Chiaramente è impostato per contenere quattro elementi (li) con una larghezza di 480px l'uno.
Il quinto elemento non può essere contenuto in quella larghezza, per cui salterà sotto e non si vedrà nello slider.

Puoi risolvere semplicemente impostando quella larghezza per quello che serve a te. Puoi farlo sul file css esterno o, nel caso, direttamente nel codice html con un css in linea sull'elemento .slider:

<ul class="slider" style="width:9999px">

Per una soluzione più ottimale si potrebbe pensare di impostare tale dimensione sul JavaScript, in modo che calcoli in automatico il valore che serve effettivamente.

Oppure puoi cercare uno slider più performante e facilmente gestibile.
In jQuery c'è ne sono veramente tanti, basta fare qualche ricerca su guggol.

[DVX70]

It works....
Thank you very much for your help !!!!
Deltaelectronics