jQuery: gestire le coordinate delle slide negli slideshow

Spesso ci chiediamo cosa ci sia alla base di determinati effetti sugli slideshow jQuery e ci sentiamo intimoriti di fronte a dettagli che ci sfuggono. Ci chiediamo come si fa a realizzare slideshow così. Mi sento di rispondere come spesso risponde Stephen King a chi gli chiede come fa a scrivere i suoi romanzi: un pezzo alla volta. In questo articolo vedremo come ottenere le coordinate delle slide.

Uno slideshow è composto da più contenitori: il contenitore delle slide ha una larghezza effettiva molto maggiore di quella del contenitore più esterno, ma solo una parte è visibile grazie alla dichiarazione CSS overflow: hidden specificata sul contenitore più esterno.

Il contenitore delle slide ha quasi sempre la dichiarazione position: relative perché è questo elemento che scorre in orizzontale o verticale grazie a jQuery. Questa dichiarazione crea un posizionamento contestuale tra il contenitore e le slide.

Tale posizionamento ci permette di utilizzare il metodo position() ed accedere alle sue proprietà  top (se lo slideshow è verticale) e left (se lo slideshow è orizzontale) su ciascuna slide.

Questi valori aumentano da sinistra a destra (slideshow orizzontale) e dall’alto verso il basso (slideshow verticale). Quindi per mostrare le slide più avanzate dobbiamo sempre usare valori negativi per riportare la slide corrente in vista.

Possiamo creare un array di tutti questi valori con una semplice funzione. Per esempio, in uno slideshow orizzontale scriveremo:

function getSlidePositions() {

    var positions = [];
    
    $( "div.slide" ).each(function(i) {
       var left = $( this ).position().left;
       positions[i] = left;
    });

    return positions;

}

Se non vogliamo creare automatismi con i timer, dobbiamo associare a ciascuna slide la sua posizione. Possiamo farlo con il metodo data():

$( "div.slide" ).each(function(i) {
       var left = $( this ).position().left;
       $( this ).data( "left", left );
});	

Quindi possiamo usare la tecnica dell’indice incrementale combinato con il metodo eq() per accedere alla slide corrente e leggere la sua posizione, per esempio associando questa azione ai bottoni Avanti/Indietro dello slideshow.