CSS e slideshow: caratteristiche

I CSS sono un componente fondamentale di ogni slideshow. Se prestiamo bene attenzione al codice CSS degli slideshow più diffusi, noteremo che tutti presentano delle caratteristiche comuni a livello di regole di stile. Infatti gli slideshow per funzionare necessitano di avere un CSS di base che 1) limiti il numero di elementi visibili , 2) definisca le dimensioni degli elementi e 3) regoli il posizionamento e l'overflow del contenuto. Vediamo in dettaglio queste caratteristiche.

Struttura HTML

Uno slideshow è in genere composto dalle seguenti parti:

1. un contenitore esterno fisso
2. un contenitore interno mobile (orizzontalmente o verticalmente usando il posizionamento CSS)
3. gli elementi dello slideshow (slide di contenuti, immagini ecc.)

Quindi avremo:

<div id="slideshow">
  <div id="slideshow-wrapper">
  	<img/>
  	<!--altre immagini o slide di tipo <div class="slide"/>-->
  </div>
</div>

Regole per il contenitore esterno

Il contenitore esterno ha in genere le seguenti caratteristiche:

1. altezza e larghezza fisse (proprietà width e height)
2. proprietà overflow impostata su hidden
3. proprietà position impostata su relative (per far funzionare la regola 2 su Internet Explorer 6)

Avremo quindi:

#slideshow {
	width: 500px;
	height: 400px;
	overflow: hidden;
	position: relative;
}

Regole per il contenitore interno

Le regole per il contenitore interno sono condizionate dal tipo di slideshow utilizzato. Infatti se lo slideshow è orizzontale, verrà influenzata la sua larghezza, mentre se lo slideshow è verticale sarà la sua altezza ad essere influenzata. In entrambi i casi, il valore finale da usare si ottiene moltiplicando la larghezza (o altezza) del contenitore esterno per il numero di elementi presenti nello slideshow.

Inoltre viene aggiunto il posizionamento relativo per permettere in entrambi i casi l'effetto di scorrimento. Quindi, supponendo che il nostro slideshow è orizzontale e che abbiamo solo cinque elementi, avremo:

#slideshow-wrapper {
    width: 2500px; /* 500 x 5 */
    height: 400px;
    position: relative;
}

Regole per gli elementi dello slideshow

Se si tratta di uno slideshow verticale, gli elementi avranno semplicemente una dichiarazione di larghezza e altezza uguale alle dimensioni dello slideshow, lasciando poi il resto al contesto di formattazione di blocco che semplicemente impilerà gli elementi uno sopra all'altro.

Se invece lo slideshow è orizzontale, verrà usato il floating su tali elementi. Esempio:

#slideshow-wrapper img {
	width: 500px;
	height: 400px;
	float: left;
}

Il codice finale

Otterremo alla fine il seguente codice:

#slideshow {
	width: 500px;
	height: 400px;
	overflow: hidden;
	position: relative;
}

#slideshow-wrapper {
    width: 2500px;
    height: 400px;
    position: relative;
}

#slideshow-wrapper img {
	width: 500px;
	height: 400px;
	float: left;
}