JbhSlider — Slider en jQuery

JbhSlider permet de réaliser des diaporamas en jQuery avec la particularité de gérer les évènements rapprochés. Il n’y aura pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider. Oui, les visiteurs font ça 🙂 Outre la gestion des liens «Suivants et Précédent, JbhSlider gère la pagination entre les diapos et permet des effets de transition.

L’installation est simple : il suffit d’une liste avec un identifiant…

<div id="monSlider">
    <ul>
        <li>Contenu du premier slide</li>
        <li>Contenu du deuxième slide</li>
        <li>Contenu du troisième slide</li>
        </ul>
</div>

… et d’invoquer le plugin.

jQuery('#monSlider').jbhSlider();

JbhSlider possède de nombreuses options pour sélectionner les éléments pris en compte pour les sélecteurs, les CSS, les transitions, la pagination, la navigation et les liens «Suivants» et «Précédents».

Paramètres disponibles :

var settings = {
    init: function (slider) {},
    selector: '> ul',
    cssClass: 'jbhSlider',
    elements: {
        selector: '> li',
        cssClass: 'jbhSliderItem'
    },
    css: {
        width: 500,
        height: 250
    },
    transition: {
        type: 'fade',
        duration: 1000,
        timer: 3000,
        before: function (slider, to, transition) {transition();},
        success: function (slider, to) {}
    },
    pagination: {
        type: null,
        text: '{{page}}',
        cssClass: 'jbhSliderPages',
        currentCssClass: 'current',
        tag: 'ol',
        subTag: 'li',
        position: 'after'
    },
    navigation: {
        active: true,
        cssClass: 'jbhSliderNavigation',
        loop: true,
        next: {
            text: '>',
            cssClass: 'jbhSliderNavigationNext'
        },
    previous: {
        text: '<',
        cssClass: 'jbhSliderNavigationPrevious'
    },
    position: 'after'
    }
};

→ JbhSlider — Slider en jQuery.