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

  • Merci, je vais tester ce slide :-)

  • Welcominh

    La navigation tactile est géniale !

  • Anonyme

    Euh pas certain que l’on puisse qualifier 7Ko de « super léger »…

  • le javascript on le met avant wp_head ou /head ?

    • Tu peux le mettre avant ou après wp_head, cela n’a pas d’importance. Il faut seulement que jQuery et FlexSlider soient définis avant le script qui appelle le plugin.

      • je sais un tatillon mais je trouve qu’il est bien de préciser dans un article où mettre les codes, avant la balise /head surtout pour quelqu’un qui commence cela l’aide bien.
        Merci de la réponse

  • totodernoncourt

    Chers amis, bonjour, j’ai une question que je vais essayer de bien présenter :
    Flexslider défile ses images tout seul, à intervale déterminé, ça marche très bien.
    Quand, en revanche, je clique sur un des contrôles sous le slider proprement dit (un des petits ronds), le slide cesse. Je veux dire : il ne redémarre jamais en défilement automatique.
    Avez-vous une explication à ça, voire une piste de résolution de ce « problème » ?
    Merci.

    • C’est le paramètre pauseOnAction qui met en pause le slideshow quand il y a une interaction avec les éléments de contrôle. Il est à true par défaut ; il faut tout simplement le passer à false.

      • totodernoncourt

        Ah ! Ben c’est merci !! Bonne journée.

  • Raphaël

    Bonjour, malgré plusieurs tentatives je n’arrive pas à installer le FlexSlider, mes images s’affichent les unes en dessous des autres avec un point à côté, voici une copie de mon code:

    Document sans nom

    $(window).load(function() {
    $(‘.flexslider’).flexslider();
    });

    Quelqu’un a une idée ?

  • PLG

    Salut j’aimerais savoir Comment puis-je Creer un Slider pour mon Blog un lien a chaque images pour que les images soient Cliquables

    • Bonjour,
      votre site est en HTML, en PHP, sous CMS ?
      Merci

      • PLG

        Un site HTML

        • bonjour,
          il faut mettre toutes les codes dans vos fichiers

    • Dans le cas de FlexSlider, il suffit d’insérer des liens englobant l’image dans chaque li.