Rhinoslider, un slider jQuery flexible avec de multiples effets

11 avril 2012

Rhinoslider est un plugin jQuery léger et flexible, capable d’afficher n’importe quel contenu HTML (texte, images, vidéos, etc) sous forme de slider, avec en bonus la possibilité de personnaliser votre diaporama directement en ligne grâce à un générateur de slider.

Léger et flexible

Rhinoslider est un des diaporamas jQuery les plus flexibles du moment. Totalement personnalisable, l’outil propose une vaste gamme d’effets de transition (none, fade, slide, shuffle, etc) accompagnés de fonctions easing (linear, swing, easeInQuad, easeInBounce, etc) issues du plugin jQuery Easing. Il est également possible de personnaliser l’animation, le contrôle, le comportement, et le style du slider.

Un générateur de slider

Le site du plugin propose un générateur de slider en ligne, de quoi ravir les personnes peu expérimentées avec le framework jQuery. Très pratique, ce générateur permet aux internautes de tester toutes les possibilités du slider jQuery. Chaque paramètre étant éditable, vous pouvez configurer en temps réel votre diaporama (rafraîchissement de la page nécessaire) sans écrire la moindre ligne de code. Une fois votre slider terminé, il vous suffit de télécharger le code source qui correspond. A noter que les fonctions de callbefore et de callback ne sont pas incluses dans le générateur.

Comment utiliser Rhinoslider ?

L’utilisation de Rhinoslider est très simple. Si vous ne souhaitez pas passer par le générateur de slider, vous pouvez bien sûr l’installer « à la main » en commençant par définir la structure HTML.

<ul id="slider">
   <li><img src="img/slider/01.jpg" alt="" /></li>
   <li><img src="img/slider/02.jpg" alt="" /></li>
   <li><img src="img/slider/03.jpg" alt="" /></li>
   <li><img src="img/slider/04.jpg" alt="" /></li>
   <li><img src="img/slider/05.jpg" alt="" /></li>
</ul>

Ensuite on inclut le framework jQuery (1.4.2+) et le plugin Rhinoslider (JS et CSS).

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/rhinoslider.js"></script>
<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">

Et on termine par l’appel du plugin sur notre élément HTML.

$(document).ready(function() {
   $('#slider').rhinoslider({
      effect: 'fade',
      showTime: 6000,
      effectTime: 2000
   });
});

Dernière étape, le style. Si vous n’aimez celui par défaut, vous pouvez créer votre propre style en utilisant les classes CSS disponibles dans l’API du plugin. Bref, Rhinoslider est un plugin jQuery facile à prendre en main pour mettre en place un slider léger et flexible, avec une compatibilité navigateur plutôt bonne, Internet Explorer 8 étant supporté.

Requis : jQuery 1.4.2+
Compatibilité : IE 8+, Firefox, Chrome, Opera, Safari
Démonstration : http://rhinoslider.com/
Licence : MIT / GPL Version 2

Commentaires