FlexSlider, un slider jQuery « responsive design »

9 octobre 2011

FlexSlider est un slider jQuery flexible et sémantique capable de gérer le « responsive design » : technique qui consiste à rendre le design d’un site compatible avec n’importe quel appareil grâce à un contenu qui s’adapte automatiquement à la résolution d’écran.

Un slider qui s’adapte

FlexSlider est un slider qui fonctionne aussi bien sur un écran d’ordinateur que sur celui d’une tablette tactile ou d’un smartphone, ce qui n’est pas le cas des plugins jQuery de façon générale. Cette performance est due à la technique du « responsive design » : solution alternative à la version mobile d’un site, l’interface s’adapte en fonction de l’écran en exploitant les propriétés CSS d’une feuille de style (notamment avec les media queries CSS3). Ainsi le diaporama s’adapte parfaitement au support !

En plus de cette particularité, le plugin est de qualité avec une structure HTML simple qui respecte les standards du web. On retrouve également toutes les options classiques d’un slider jQuery avec le choix du type de transition, le défilement automatique, la durée d’animation entre deux diapositives, la possibilité de mettre en pause, les touches directionnelles de navigation, mais également des options plus originales comme la navigation tactile qui est très réussie. L’outil fonctionne sur la majorité des navigateurs récents : Firefox 3.6+, Chrome 4+, Opera 10+, Safari4+, IE7+, ainsi que iOS et Android.

Débuter avec Flexslider

On commence par déclarer le framework jQuery et FlexSlider (JS et CSS) dans l’entête du fichier.

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.flexslider.js"></script>

Le structure HTML de FlexSlider est simple : il s’agit d’une div avec la classe CSS « flexslider » contenant une liste à puces avec la classe « slides ». Il est nécessaire d’utiliser le mot « slides » car le JavaScript s’applique uniquement sur cette classe. En revanche, libre à vous de de renommer la classe « flexslider ». Puis mettez vos images ou autres dans chaque li.

</pre>
<div class="flexslider">
<ul class="slides">
	<li><img src="slide1.jpg" alt="" /></li>
	<li><img src="slide2.jpg" alt="" /></li>
	<li><img src="slide3.jpg" alt="" /></li>
</ul>
</div>
<pre>

Et enfin, dernière étape, la partie jQuery qui fait appel à la fonction flexslider() avec $(window).load(). Son utilisation est nécessaire pour s’assurer que le contenu de la page soit bien chargé. Plus d’une vingtaine d’options est disponible sur le site pour configurer votre diaporama.

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

FlexSlider est donc un plugin jQuery qui vous permettra de mettre en place un slider facilement, lisible sur tous les supports grâce à la technique du « responsive design » qui semble apporter une réponse concrète à la prolifération des formats d’écran prenant une place de plus en plus importante dans la navigation Internet mondiale.

Requis : jQuery
Démonstration : http://flex.madebymufffin.com/
Licence : MIT

Commentaires