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

  • FRAITURE Damien

    Bonjour,

    Je trouve très très pratique ce plug in. Je l’utilise pas mal, mais là, j’ai un beau petit souci que je n’ai pas encore rencontré : je dois charger des articles assez long. J’ai utilisé des tableaux pour me faciliter la vie. Et maintenant que je tente d’utiliser bxSlider, j’ai un souci d’affichage au chargement de ma page qui disparaît dès qu’on a utilisé l’un des bouton du slide : mon dernier article apparaît en partie sur la gauche de ma page, ce qui décale mon article principal vers la droite et empêche de lire le fin de chaque ligne. Comme je l’ai dit, cela disparaît dès qu’on passe d’un slide à l’autre … Une idée ?

    Merci

    • Anonyme

      Envoie un lien si tu veux que je regarde !

  • FingR

    Hello, Je viens d’utiliser ce plugin et je me rend compte que quand je met un lien vers un site, ce lien ne fonctionne pas. Peut-on résoudre le problème ?

    Merci d’avance

    • Donne le lien de la page où tu as le problème que je regarde !

      • FingR

        Je suis désolé mais l’instant ce site est en local. Et je n’ai donc pas de lien. Au pire peut tu me dire si, en prenant ce plugin, et que tu met des liens vers des sites externes dans ton carrousel cela fonctionne ?

        Si cela marche dit moi comment tu a fait ?

        Merci

        • Oui, cela fonctionne. Un lien doit être placé dans chaque balise correspondant à une diapositive (« li » ou « div »).

          • FingR

            Je sait mais sa ne marche pas, regarde mon code html :

            Titre :
            blabla
            blabla bla bla.
            blabla : SITE E.C.O.L.E de la mer.
            Il sera en ligne très prochainement.

            le a href n’est pas cliquable :s je n’arrive pas a comprendre pourquoi….