Realizzare uno slideshow con jQuery

Nell’articolo di oggi vi propongo lo sviluppo di uno slideshow in jQuery in cui le immagini, oppure blocchi se vogliamo generalizzare, si spostano da destra verso sinistra. Ecco il risultato:

RISULTATO - Visualizza lo slideshow in funzione

La struttura HTML è gestita in modo tale da avere un contenitore principale, main_cont, contenente i vari blocchi, box, da visualizzare che sono affiancati l’uno all’altro. Il contenitore è inserito in un elemento, mask, grande esattamente quanto il singolo blocco: questo mi permette di visualizzare solo un blocco e di nascondere tutti gli altri (da qui il nome mask). L’immagine dovrebbe chiarire.

Vediamo come gestire il codice:

HTML

 
<div id="mask">
            <div id="main_cont">
                       <div class="box"></div>
                       <div class="box"></div>
                       <div class="box"></div>
                       <div class="box"></div>
                       <div class="box"></div>
            </div>
</div>
<button id="go">Run</button>

Attraverso il CSS definisco qualche importante proprietà: mask nasconderà tutto ciò che esce fuori dai suoi bordi e i box saranno affiancati l’uno all’altro impostando il posizionamento da sinistra, left, calcolato appositamente. Per una questione di dinamicità le dimensioni, eccetto quelle dei singoli box, sono definite da jQuery, vedremo più tardi il perché.

CSS

 
#mask
{
            position: relative;
            background-color: transparent;
            overflow: hidden;
            margin-left: auto;
            margin-right: auto;
}
#main_cont
{
            position: relative;
}
.box
{
            position: absolute;
            width:300px;
            height:300px;
}

Si parlava appunto di dinamicità: la lunghezza del main_cont equivale alla larghezza del singolo box (tutti i box hanno stessa larghezza) moltiplicato per il numero dei box. Essendo quest’ultimo differente in base alle esigenze di chi utilizzerà lo script, lascio gestire a jQuery il calcolo delle dimensioni.

Questo si occuperà di gestire anche la transizione: i box si sposteranno tutti verso sinistra di un valore pari alla larghezza di un box. Ovviamente uno di questi, il “capofila”, uscirà dai margini del main_cont assumendo un valore di left negativo! Alla fine della animazione dunque questo box, individuato appunto per il valore negativo, sarà “spostato” all’ultimo posto. Essendo oltre i margini anche di mask, che ha overflow impostato ad hidden, quest’operazione avviene in maniera del tutto trasparente!

Nell'animazione potete usufruire dei vari effetti di easing che potete provare nello script!

jQuery

 
$(document).ready(function()
{
            var x = 0;
            var width_box = $('.box').width();
            var height_box = $('.box').height();
 
            // applico left
            $('.box').each(function()
            {
                       $(this).css("left",(width_box*x));
                       x++;
            });
 
            // dimensioni mask
            $('#mask').css("width", width_box);
            $('#mask').css("height", height_box);
            // dimensioni main_cont
            $('#main_cont').css("width", width_box*x);
            $('#main_cont').css("height", height_box);
 
            $("#go").click(function(){
                  $('.box').each(function(){
                     $(this).animate({"left":"-="+width_box+"px"},1000,function()
                     {
                          $('.box').each(function()
                          {
                               left = $(this).css("left").substring(0,($(this).css("left").length -2));
                                    if(left < 0 )
                                    {
                                         $(this).css("left", (width_box*x - width_box));
                                     }
                           });
                      });
                    });
                });
});