jQuery Carousel Plugin: Elastislide

Con l’avvento delle nuove tecnologie l’aspetto estetico di qualsiasi sito web sta assumendo un ruolo sempre più importante. Si sta progressivamente abbandonando il sito a larghezza fissa per siti “liquidi”, adattabili cioè a qualsiasi schermo.
Fino a poco tempo fa questi erano siti che prediligevano sopratutto la funzionalità, lasciando l’aspetto grafico in secondo piano. L’avvento di jQuery e la sua sempre maggiore diffusione ha invertito questa tendenza, permettendo al web designer di realizzare siti adattabili senza tralasciare l’aspetto visivo.

Oggi vi presentiamo JQuery Elastide, un Plugin jQuery che vi permetterò di creare dei Carousel adattabili a tutte le risoluzioni.

► JQUERY, I MIGLIORI PLUG IN PER IL WEB DESIGN

Il codice da inserire nella vostra struttura è molto semplice, consiste in un div principale la cui larghezza si adatterà a qualsiasi contenuto fluido inserito al suo interno. Chiaramente se inserirete al suo interno un carousel con una larghezza fissa, il div principale non si adatterà, quindi accertatevi che il vostro contenitore abbia un layout adattabile.

Prima però bisogna richiamare jQuery ed il plugin Elastislide:

[sourcecode language=’js’]

[/sourcecode]

[sourcecode language=’js’]

[/sourcecode]

All’interno del div principale bisogna inserire una lista di immagini come nel seguente esempio:

[sourcecode language=’html’]