Roundabout, un slider jQuery avec rotation d’éléments

13 juin 2011

Roundabout est un plugin jQuery permettant de mettre en place un carrousel original : les items tournent autour d’un axe et donnent ainsi un effet de profondeur à l’animation.

Feuilletez vos éléments HTML

Roundabout permet d’animer une structure HTML d’éléments statiques autour d’un axe de rotation. L’animation rappelle un peu celle du cover-flow d’iTunes : il faut « feuilleter » les items en périphérie de la diapositive courante pour les faire passer au premier plan.

Comme un carrousel, le plugin est assez complet et on retrouve des fonctionnalités de base telles que la durée d’animation, les boutons de navigation, la lecture automatique en boucle, le choix de la diapositive de départ… mais aussi des fonctionnalités plus originales comme le changement de taille et d’opacité des items lorsqu’ils passent en arrière plan. Vous pouvez également utiliser le plugin jQuery Easing afin d’utiliser les fonctions d' »easing » qui permettent de réaliser des animations plus complexes.

Votre premier Roundabout

Comme toujours, commencez par inclure la librairie jQuery dans votre fichier HTML. Puis déclarez une liste non ordonnée sur laquelle vous allez définir un « id ».

<ul id="myRoundabout">
   <li>Box 1</li>
   <li>Box 2</li>
   <li>Box 3</li>
   <li>Box 4</li>
</ul> 

Quelques propriétés CSS pour définir le style de Roundabout.

.roundabout-holder { padding: 0; height: 5em; list-style: none; }
.roundabout-moveable-item {
      height: 4em;
      width: 4em;
      cursor: pointer;
      background-color: #ffc;
      border: 1px solid #999;
}
.roundabout-in-focus { cursor: auto; }

Et enfin, l’appel jQuery de Roundabout sur la liste à puce via son « id ».

$(document).ready(function() {
      $('ul#myRoundabout').roundabout();
});

Vous pouvez bien entendu personnaliser Roundabout comme bon vous semble avec du CSS. Les différentes options et les classes CSS du plugin sont à découvrir sur le site officiel !

Requis : jQuery
Démonstration : http://fredhq.com/projects/roundabout
Licence : BSD

Commentaires

  • Lemeusien55

    Bonjour
    Quelqu’un a t-il déjà utilisé ce plugin avec des image png transparents???
    Avec ce type d’image j’ai un bug, la transparence n’est gérée et remplacée par du noir, c’est trés moche du coup…
    Une idée???
    Merci

    • Anonyme

      Roundabout fonctionne très bien avec des images PNG transparentes. Envoie le lien de ton exemple, que je jette un œil, et sinon quel navigateur utilises-tu ?

  • Gil

    Bonjour,

    merci pour cet article sympa.
    J’utilise ce plugin qui fonctionne à merveille, cependant je rencontre un souci lorsque le nombre d’image est de 7 (et ce uniquement pour 7).
    Quelqu’un à t-il déjà rencontré ce problème ?

    J’ai trouvé cela : http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/354106/page1 mais hélas ça ne résout pas mon souci.