bxSlider, un slider d’image et de contenu en jQuery

12 avril 2011

bxSlider est un plugin jQuery qui permet de créer un carrousel avec n’importe quel type de contenu HTML. Parmi les options disponibles : la lecture automatique, la durée d’animation, le type de transition, etc.

Un plugin simple et complet

bxSlider (anciennement bxCarousel) est un plugin complet : plus d’une quanrantaine d’options à configurer et une vingtaine de fonctions de callback peuvent être utilisées ! Le plugin peut également faire office de slideshow, c’est-à-dire être utiliser comme un diaporama d’images. On retrouve toutes les options de base d’un slider :

  • 3 transitions : horizontale, verticale, ou fondu enchainé
  • possibilité d’utiliser les fonctions « easing » (avec jQuery Easing)
  • déplacement d’une ou plusieurs slides à la fois (carrousel)
  • boutons de navigation, pagination et contrôle automatique
  • fonctions de callback (before, after, first, last, next, prev)
  • et tout un tas d’options…

Mon premier carrousel

On inclut la librairie jQuery et le plugin bxSlider ainsi que la feuille de style qui l’accompagne comme ci-dessous.

<link rel="stylesheet" type="text/css" href="bx_styles/bx_styles.css" />
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>

Ensuite on déclare la structure HTML du slider : une simple liste à puces.

<ul id="slider1">
    <li>
        <h2>hello i am the first header!</h2>
        <p>and i am some groovy body text.</p>
    </li>
    <li>
        <h2>hello i am the second header!</h2>
        <p>and i am some more groovy body text.</p>
    </li>
</ul>

Et on termine par faire un appel à la fonction bxSlider() (ici sans paramètres).

$(document).ready(function(){
    $('#slider1').bxSlider();
});

bxSlider est un plugin jQuery simple d’utilisation qui permet de mettre en place un carrousel en un rien de temps. Retrouvez plusieurs démonstrations sur le site officiel !

Requis : jQuery
Démonstration : http://bxslider.com/
Licence : libre

Commentaires