FerroSlider, un slider jQuery fullscreen et responsive

4 mars 2012

FerroSlider est un slider jQuery « responsive » qui permet d’organiser le contenu de votre site sous forme de diapositives. Ainsi, vous passez d’une slide à l’autre par un effet de glissement, et ce quelque soit la direction.

Principales caractéristiques

Beaucoup plus complet que le plugin Ascensor, FerroSlider est une façon originale de naviguer sur vos pages. Le déplacement du contenu est contrôlé au clic ou au clavier, et s’effectue aussi bien horizontalement que verticalement, et même en diagonale. Vous pouvez créer vos propres matrices de navigation afin de personnaliser le positionnement et le déplacement de vos slides. Il est également possible de générer les liens pointant sur chaque slide, de charger le contenu des diapositives en AJAX ou encore de personnaliser l’animation de glissement avec le plugin jQuery Easing.

FerroSlider a été conçu pour s’utiliser en mode plein écran navigateur pour donner l’illusion de faire glisser de véritables pages web les unes sur les autres. Le slider s’adapte à n’importe quel support avec la technique du « responsive design » qui lui permet de s’adapter automatiquement à l’écran. Mais vous pouvez très bien l’utiliser sous forme de slider classique, avec des dimensions fixes (voir l’option container).

Options et matrices

FerroSlider comporte plus d’une vingtaine de paramètres qui donnent la possibilité de définir la vitesse et le type de transition, le chargement du contenu en AJAX, la lecture automatique dans le cas d’un slider classique, l’axe et l’ordre de transition, l’image de fond, les boutons de navigation, les boutons play/pause, etc.

Le point fort du plugin est l’utilisation des matrices. Une matrice permet de personnaliser le positionnement de vos diapositives. Ainsi, vos pages ne sont pas forcément affichées linéairement ; par exemple, si vous avez cinq pages de contenu, vous pourriez les placer en forme croix avec une page centrale (voir ce site), et naviguer sur les quatre autres pages en glissant vers le haut, le bas, la gauche et la droite.

Pour cela, il faut utiliser l’objet « The Matrix » qui permet de définir une grille de l’espace dans laquelle votre contenu sera placé. Cet objet fonctionne comme une matrice mathématique ; chaque cellule est un objet qui définit le comportement du contenu. Chaque objet peut donc se comporter d’une manière différente en utilisant les paramètres spécifiques aux matrices.

Comment l’utiliser

Pour mettre en place FerroSlider, on commence par inclure le framework jQuery (version 1.6+), et éventuellement le plugin jQuery Easing pour personnaliser les transitions. Vous devez ensuite inclure FerroSlider qui comprend deux fichiers : le JavaScript et la feuille de style.

<link rel="stylesheet" href="jquery.ferro.ferroSlider.css" type="text/css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.ferro.ferroSlider-1.2.min.js"></script>

On crée la structure HTML avec une classe CSS commune pour chaque page.

</pre>
<div id="div1" class="slidingSpaces" title="Page 1">first page</div>
<div id="div2" class="slidingSpaces" title="Page 2">second page</div>
<div id="div3" class="slidingSpaces" title="Page 3">third page</div>
<div id="div4" class="slidingSpaces" title="Page 4">fourth page</div>
<div id="div5" class="slidingSpaces" title="Page 5">fifth page</div>
<pre>

Et il suffit d’appeler la méthode ferroSlider() sur notre classe CSS pour que le slider soit fonctionnel. Dans cet exemple, on n’utilise pas de paramètres ; le plugin va donc utiliser les valeurs par défaut.

$(document).ready(function() {
    $('.slidingSpaces').ferroSlider();
});

Vous pouvez définir une matrice et utiliser les options de la manière suivante :

var matrix = [
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ],
    [
        {full:1},{full:1,first:true},{full:1}
    ],
    [
        {full:0},{full:1,moveDirection:'yx'},{full:0}
    ]
];

$(document).ready(function() {
    $(".slidingSpaces").ferroSlider({
        axis                    : 'xy',
        displace                : matrix,
        easing                  : 'easeOutExpo',
        createMap               : true,
        feedbackArrows          : true,
        fullScreenBackground    : true,
        mapPosition             : 'bottom_center',
        backGroundImageClass    : 'bg',
        preloadBackgroundImages : true,
        time                    : 300
    });
});

Spécialement conçu pour enrichir le contenu de vos pages grâce à une navigation originale et animée, FerroSlider est un plugin qui reflète bien les tendances du moment : « cross-browser », « fullscreen », « responsive » et multi-directionnel.

Requis : jQuery
Compatibilité : Firefox 3.5+, Chrome 4.0+, Opera 11+, IE7+, Safari 3.1+, Android 2.2+, iOS 3+
Démonstration : http://www.alessandroferrini.it/lab/jQueryPlugins/ferroSlider/docs/
Licence : Apache 2.0

Commentaires

  • Plugin sympa, on y trouve ce qu’il manquait (ou etait pas expliqué du tout) au plugin Ascensor.js

    La au moins on est pas obligé de modifier le code du plugin pour faire des accès direct à une des pages :p

    Dommage, ne marche pas sur WP7 (on dirait qu’il n’aime pas qu’on cache des trucs à coup d’overflow)

    • Petit complément : je trouvais quand même Ascensor beaucoup plus fluide et réactif … impression ?

      • Il me semble qu’on perd plus ou moins en fluidité dès lors que le contenu est lourd à charger.

  • Welcominh

    Je lis « chargement du contenu en Ajax ». Mais la structure du site ne change pas non ? c’est-à-dire lien réel et plan de site.
    Parce qu’il ne faudrait pas oublier le point référencement non plus :p

  • Milkymary

    Très sympa ! Mais je me demande comment l’utiliser pour un wordpress? Si quelqu’un a des pistes.. ;)

  • gabriella30

    qmi – Last few years i used to be low on cash and debits were killing me from everywhere. That was Until i found out how to make money.. on the internet. I visited surveymoneymaker point net, and started filling in surveys for cash, and yes I’ve been far more able to do my things! i am very happy that I did this.. With all the financial stress these years, I really hope all of you will give it a chance. – itT