Blueberry est un plugin jQuery expérimental et open source permettant de faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design). Les utilisateurs utilisent de plus en plus souvent des smartphones pour consulter des pages web ; les intégrateurs web ont donc de plus en plus besoin de maquettes flexibles pour les satisfaire. Voici donc un diaporama adapté à cet usage.
Marquage HTML nécessaire pour utiliser Blueberry :
<div class="blueberry">
<ul class="slides">
<li><img src="img/slide1.jpg" /></li>
<li><img src="img/slide2.jpg" /></li>
<li><img src="img/slide3.jpg" /></li>
<li><img src="img/slide4.jpg" /></li>
</ul>
<!-- Optional, see options below -->
<ul class="pager">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<!-- Optional, see options below -->
</div>
Appel du plugin Blueberry :
$(window).load(function() {
$('.blueberry').blueberry();
});