Megaptery, explorez les profondeurs du web !

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