Creare image slider in JavaScript
Per image slider intendiamo uno slideshow o sequenza di immagini, di dimensioni fisse, visualizzate in sequenza (automatica o manuale). Dopo aver testato due di questi script, vi diamo alcune semplici regole di utilizzo.
Nivo Slider
Leggero e semplice da configurare, questo “slider” è basato sulla libreria javascript jQuery.
Versione: 2.4 (24/01/11)
Sito ufficiale: nivo.dev7studios.com
Richiede: jQuery (1.4+)
Download: 90 KB (js + immagini + css + jquery-1.4.3.min)
Installazione
Dopo aver scaricato e scompattato Nivo Slider e jQuery sul vostro sito è necessario includere il seguente codice all’interno del tag <head> della vs pagina:
<link rel="stylesheet" type="text/css" href="nivo-slider.css" media="screen" /> <script type="text/javascript" src="scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
e verificare il corretto posizionamento dei file immagini e css. Le immagini da visualizzare vanno racchiuse in un tag div in questo modo:
<div id="slider"> <img src="slide_01.jpg" /> <img src="slide_02.jpg" /> </div>
ed infine utilizzare il selettore jQuery, come segue:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Demo
Esempio di slideshow realizzato con Nivo Slider. Gli stili e i bottoni sono personalizzabili, molte opzioni di configurazione (transizioni, etc) le trovate sul sito dell’autore.
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.