RefineSlide, un slider jQuery moderne avec transitions CSS 3D

25 septembre 2012

RefineSlide est un plugin jQuery qui permet de mettre en place un slider responsive qui a la particularité d’utiliser des transitions CSS, notamment de superbes animations 3D. Un slideshow à la fois moderne et complet… idéal pour les passionnés de CSS3.

Un slider moderne

Les plugins jQuery faisant office de slider sont de plus en plus nombreux. Difficile de faire un choix lorsqu’ils présentent plus ou moins les mêmes fonctionnalités. Avec RefineSlide, c’est la modernité qui prend le dessus : inspiré par l’excellent Flexslider, le slider s’adapte automatiquement à la largeur de son conteneur (support tablette et smartphone) et se démarque par l’utilisation des transitions et transformations CSS3 qui permettent de réaliser des transitions du plus bel effet.

Il est possible d’utiliser une dizaine de transitions très réussies, accompagnée d’une fonction « fallback » pour les anciens navigateurs qui ne supportent pas CSS3 (uniquement effet « fade »). On retrouve également plusieurs paramètres pour configurer des fonctionnalités plus basiques : définir le délai de transition, le délai entre deux slides, la lecture automatique ou encore le mode de navigation (clavier, flèches, miniatures), etc.

Installation de RefineSlide

Il faut commencer par inclure le framework jQuery (version 1.7 minimum) et le plugin RefineSlide (JS et CSS) dans la balise head de votre document.

<link rel="stylesheet" href="refineslide.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.refineslide.min.js"></script>

Au niveau de la structure HTML, c’est comme la plupart des sliders ; il faut définir ses images (de même taille) dans une liste à puces.

<ul class="rs-slider">
   <li><img src="img1.jpg" alt=""/></li>
   <li><img src="img2.jpg" alt=""/></li>
   <li><img src="img3.jpg" alt=""/></li>
</ul>

Puis il faut terminer par l’appel jQuery, juste avant la fermeture de la balise body.

$(document).ready(function () {
   $('.rs-slider').refineSlide();
});

Bref, un slider jQuery complet qui prend les devants en utilisant les nouvelles capacités qu’offrent CSS. Amusez-vous !

Requis : jQuery 1.7+
Compatibilité : Firefox, Chrome, Opera, Safari, IE7+
Démonstration : http://alexdunphy.github.com/refineslide/
Licence : MIT

Commentaires

  • C’est beau et fluide :)
    Je sens que ca va bientôt apparaître sur une de mes prods.

  • toto

    chez moi sa ne va pas avec OPERA par contre avec les autres navigateur sa fonctionne

  • Outch, tout simplement superbe, je sens que je vais vite l’adopter.

  • Superbe ! Je vais garder cette ressource sous le coude et je compte bien réussir à l’intégrer dans un de mes projets.

    Dommage qu’il y ait un léger problème avec Opéra.