Flexslider

Il punto di forza di questo slider basato sulla libreria jQuery, passato sotto le mani della WooThemes, è quello di essere "responsive", in grado cioè di adattarsi al dispositivo di visualizzazione.

Versione: 1.8 (22/10/11)
Sito ufficiale: www.woothemes.com/flexslider
Richiede: jQuery (1.3+)
Download: 95 KB (js + immagini + css + jquery-1.4.3.min)

 

Installazione

Dopo aver scaricato e scompattato Flexslider e jQuery (o utilizzate la versione on line messa a disposizione da Google: "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js") sul vostro sito è necessario includere il seguente codice all'interno del tag <head> della vs pagina:

<link rel="stylesheet" type="text/css" href="flexslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.flexslider-min.js"></script>

e verificare il corretto posizionamento dei file immagini e css. Le immagini da visualizzare vanno racchiuse in un tag div ed uno ul in questo modo:

<div class="flexslider">
  <ul class="slides">
    <li><img src="slide_01.jpg" /></li>
    <li><img src="slide_02.jpg" /></li>
  </div>
</div>

ed infine utilizzare il selettore jQuery all'interno del tag head, come segue:

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

 

Demo

Esempio di slideshow realizzato con MooThemes Flexslider. Gli stili e i bottoni sono personalizzabili, molte opzioni di configurazione (transizioni, etc) le trovate sul sito dell'autore.

 

Per commenti, scriveteci.