In questo post, presentiamo uno strumento responsive molto interessante per i nostri layout web: bxSlider. Il suo scopo è fornire uno slider di immagini e contenuti in jQuery da installare velocemente al costo di pochissime righe di codice.

Come viene spiegato nell’homepage del sito, per utilizzarlo, si deve scaricare la libreria ed integrarla nel layout insieme a jQuery che ne costituisce il prerequisito:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/js/jquery.bxslider.min.js"></script>
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Fatto ciò, basterà indicare, per ogni slider, un blocco di tag <ul>, appartenente alla classe bxslider:

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Ed infine, avviare lo slider una volta che il documento sarà pronto:

$(document).ready(function(){
  $('.bxslider').bxSlider();
});

Altro aspetto apprezzabile del progetto è la lunga galleria di esempi, ben spiegati nelle finalità e nei metodi, che non offrono solo ciò che ci si aspetterebbe da uno slider ma anche casi di utilizzo più interessanti che sfruttano contenuti diversi dalle immagini o funzioni interne della libreria per la gestione degli eventi che si verificano al caricamento del componente o alla transizione tra una slide e l’altra.

E voi come realizzate il vostri slider nelle pagine web ? Commentate e fateci sapere !