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

  • Test

    Ca a l’air pas mal. Mais le principe d’un slider au rollover, ca a l’air tout sauf ergonomique. A tester pour confirmer.

  • jQuery master

    Ca a l’air pas mal. Mais le principe d’un slider au rollover, ca a l’air tout sauf ergonomique. A tester pour confirmer.

  • Dang Ky

    anybody download it can share for me, i can not download from the home page of production :(

  • ce slide nè pas gratuit source fermer et un lien commercial est afficher laure du déploiement sur un site extranet :/ merci pour le partage

  • Hey Guys! Please try the new version for free at http://www.flowslider.com/download

    The ball is rolling, make sure to slide some HTML, too.