Flow Slider, un slider jQuery qui défile au « rollover »

18 décembre 2011

Flow Slider est un plugin jQuery qui permet de mettre en place un slider de contenu HTML qui se déclenche et défile au « rollover ». Les diapositives sont alors déplacées en fonction de la position de la souris sur le carousel, ce qui donne un effet original pour présenter une liste d’items.

Un slider original et complet

Léger et rapide d’exécution, Flow Slider est un plugin complet qui comporte une vingtaine d’options et une API d’une dizaine de méthodes pour personnaliser au mieux votre carousel. Vous pouvez choisir le type de transition parmi une gamme de quatre effets prédéfinis, ou utiliser vos propres animations que vous aurez créées grâce à la méthode FlowSlider.transition.

Vous pouvez également attacher des événements, interagir avec le curseur de la souris, ou encore personnaliser le design du slider avec quelques propriétés CSS. Côté compatibilité, Flow Slider fonctionne avec les principaux navigateurs du marché : Firefox, Chrome, Opera, Safari et Internet Explorer 6+.

Configuration de base

Facile à prendre en main, il s’utilise comme n’importe quel plugin jQuery. Vous devez d’abord inclure le framework JavaScript. Ensuite, c’est au tour du plugin lui-même d’être appelé.

<script src="jquery.js"></script>
<script src="flowslider.jquery.js"></script>

Puis on définit la strucutre HTML du slider comme ceci.

<div id="slider">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

Et pour terminer, on fait appelle à FlowSlider en sélectionnant l’id de la structure HTML.

$(document).ready(function() {
    $("#slider").FlowSlider();
));

Pour utiliser les options, on procède de cette manière.

$("#slider").FlowSlider({
    transition: "none",
    marginLeft: 100,
    frequency: 20
});

Flow Slider est donc un outil original pour mettre en avant une liste d’éléments HTML. Par exemple, on peut facilement imaginer la présentation de festivals sur un site événementiel ou encore l’affichage de livres destinés à la vente sur un site e-commerce, comme sur la page de démonstration du plugin.

[EDIT] : Flow Slider est désormais sous licence payante.

Requis : jQuery
Compatibilité : Navigateurs modernes
Démonstration : http://www.flowslider.com/
Licence : payante

Commentaires