FlexSlider – jQuery slider responsive

Scritto da Fabio Quarantini
in JavaScript, Tutorials
il 5 Luglio 2012
Commenti

FlexSlider è uno tra i migliori slider di immagini per jQuery che presenta infinite possibilità di personalizzazione. Uno dei suoi punti di forza è quello di poter realizzare in pochi passaggi uno slider responsive compatibile con la gesture swipe dei dispositivi touch.

L’utilizzo è molto semplice e, come spiegato nella documentazione ufficiale, prevede l’inserimento di contenuto html oltre alle immagini. Questo ci permette di creare slider per utilizzi specifici, il tutto attraverso un markup pulito e semantico.

Il plugin è stato acquistato recentemente da Woothemes e aggiornato alla versione 2 che introduce nuove proprietà come la possibilità di creare carousel. Il funzionamento è testato sulla maggior parte dei browser moderni come Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, IE7+ e su dispositivi mobili iOS e Android. Per funzionare richiede la libreria di jQuery, versione 1.4.2 o superiore.

Caratteristiche

Supporto per dispositivi touch
Markup semplice e pulito
Slider multipli nella stessa pagina
Supportato dalla maggior parte dei browser
Animazioni slide verticali, orizzontali ed effetto fade
Supporto per jQuery easing
Possibilità di inserire contenuto html all’interno delle slide
Personalizzazione avanzata
Navigazione attraverso tastiera, gesture e mouse
Licenza open source GPLv2

Funzionamento

Una volta scaricato il plugin bisogna aggiungere, all’interno del tag <head>, il file css flexslider.css, la libreria di jQuery e il file JavaScript del plugin jquery.flexslider.js. Per evitare il rallentamento della pagina è possibile inserire i file JavaScript prima della chiusura del tag </body>.

<link rel="stylesheet" href="flexslider.css" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>

All’interno del tag <body>, nella posizione in cui vogliamo far apparire lo slider, bisogna inserire un div contenitore – ad esempio <div class="flexslider"> - e una lista non ordinata dove il contenuto di ogni singola <li> equivale ad una slide.

<div class="flexslider">
<ul class="slides">
	<li><img src="slide1.jpg" alt="Slide" /></li>
	<li><img src="slide2.jpg" alt="Slide" /></li>
	<li><img src="slide3.jpg" alt="Slide" /></li>
</ul>
<div>

Ora non resta che attivare il plugin al caricamento della pagina attraverso il comando .load. Per funzionare correttamente lo script deve essere posizionato dopo i file JavaScript precedentemente inseriti.

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

Questo è il funzionamento base del plugin. Per approfondire le personalizzazioni possibili vi consiglio di leggere la documentazione ufficiale e la repository su Github.

Scarica FlexSlider

Commenta