Rhinoslider, un slider jQuery flexible avec de multiples effets

11 avril 2012
11 069 vues

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

  • Weclominh

    Avec tous ces plugins jQuery de slider, ce qui serait vraiment bien, c’est un article qui fasse un comparatif des différentes solutions. Avantages / inconvénients etc, car plus ya de choix, plus le choix est difficile :p

    • http://www.chantiersorientaux.com/ mainserv

      Tout pareil, maintenant on a un peu de mal à choisir :p
      trop de choix tue le choix ?

      • http://www.megaptery.com/ Pierre

        Vous avez raison tous les deux ! Mais chaque slider a sa particularité et l’important pour choisir, c’est donc de connaitre correctement ses besoins (simple, responsive, transition particulière, etc).

        • http://www.chantiersorientaux.com/ mainserv

          A chaque nouveau slider, je teste, et c’est vrai qu’à part le côté Responsive/Non Responsive et le poids j’ai une grosse impression de déjà-vu.
          J’aime bien les thumbs en colonnes dans Fotorama, mais je doute qu’il soit le seul à le faire.

          • bat

            impossible de le faire fonctionner

  • http://www.arnaud-olivier.fr/blog Blog webdesign

    Un slider du plus bel effet et facile à mettre en place grâce à jQuery.
    Après c’est vrai qu’il y en n’à de plus en plus mais ils sont tous différends.

  • Blue_shadow360

    super slider, avec ton générateur deffet du slider, c genial, je cherchais justement comment utiliser les effets mouse sur mes slides. Mais, ya un petit défaut, le problème est que ton code ne semble pas pouvoir fonctionner si on a 2 sliders sur une page.

    • http://www.megaptery.com/ Pierre

      Pour faire fonctionner plusieurs sliders, il suffit d’utiliser une classe CSS commune dans la structure de chaque slider et dans le sélecteur jQuery (ou alors, un appel jQuery pour chaque slider avec id CSS).