logo
Federico Barberis

Web Designer

Professionista freelance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

Scarica il CV
 

Come realizzare uno slider in JQuery

jquery-banner

Come realizzare uno slider in JQuery

 

Come primo tutorial, per inaugurare il blog, ho scelto la realizzazione di uno slider di contenuti in JQuery, come quello presente nella home-page di questo sito.
Come molti di voi già sapranno, JQuery è una libreria di effetti scritta in JavaScript, che consente al designer di applicare “effetti speciali” agli elementi che compongono una pagina HTML.

Ma entriamo subito nel vivo di questa esercitazione. Per prima cosa bisogna scaricare due librerie di codice che andranno incluse nel nostro codice HTML:

Una volta scaricati questi due file e posizionati in una cartella della root del vostro sito (in questo esempio creeremo la cartella “JS”), dovrete includerli nel vostro documento HTML scrivendo queste righe all’interno del tag <head>:

Impostiamo ora il codice HTML; creiamo un tag DIV con all’interno una lista di contenuti:

Adesso definiamo il codice CSS per gli elementi del tag #slider:

Questo è lo stile usato nel mio sito, ovviamente potete personalizzarlo in base ai vostri gusti.
Ma veniamo ora alla parte più importante, il codice javascript che fa funzionare il tutto. Sempre dentro il tag <head> all’interno di un nuovo tag <script> dopo quelli inseriti precedentemente andremo ad inserire questo snippet di codice:

Se abbiamo fatto tutto correttamente il nostro slider mostrerà in sequenza i contenuti presenti all’interno dei tag <li>.
Per qualsiasi dubbio o chiarimento, vi invito a commentare il post.

Buona navigazione e alla prossima!

Federico Barberis
info@weblabdesign.net

Web designer free-lance con oltre 15 anni di esperienza nel settore della grafica digitale applicata al web e alla stampa. Esperto della piattaforma WordPress e del framework Bootstrap sono in grado di seguire l’intero workflow per la realizzazione di un sito web, dalla progettazione grafica alla implementazione su server e la pubblicazione on-line. Sono appassionato del mio lavoro e alla continua ricerca di tools e soluzioni efficaci e magari innovative.

1 Comment
  • Ciao! Questa effettivamente è proprio il tipo di slide che mi servirebbe. Attualmente ne ho un’ altra generata con Nivo, ma non mi piace l’ effetto di transizione e vorrei un’ entrata a scorrimento. Purtroppo questo tutorial per me è già avanzato (si lo so lo so, non ci capisco nulla purtroppo) ho fatto delle prove, tentativi, ma credo di far solo casino. Peccato perchè era davvero bella…

    8 maggio 2013 at 14:31

Pubblica commento