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