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.
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.
Commenta