BkgSlider
BkgSlider est un plugin jQuery qui vous permet d’avoir une galerie d’image pour vos background CSS.
Démo
Vous pouvez en voir un exemple sur la page de démonstration.
Utilisation
Pour utiliser BkgSlide, rien de plus simple : il vous suffit d’inclure la librairie jQuery et le plugin BkgSlide dans votre page et d’instancier le plugin avec ses options.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bkgslide.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#target').bkgSlide({
images: ['images/img1.jpg', 'images/img2.jpg']
});
});
Options
images
Un tableau contenant le nom des images à utiliser.
imagePath
Le chemin où trouver les images.
Le script ajoute automatiquement le slash final si nécessaire.
speed
La durée en millisecondes entre deux changements d’image.
Défaut : 7000
Si vous ne voulez pas que les images de fond changent automatiquement, mettez cette valeur à 0.
direction
La direction dans laquelle aller lors d’un changement d’image.
Valeurs possibles : ‘random’, ‘next’, ‘prev’
Défaut : ‘random’
wrap
Défini s’il faut reprendre à l’autre extrémité lorsqu’on atteint le bout de la liste d’images.
Défaut : true
nav
Défini les outils de navigation.
Valeurs possibles : true, une option sous forme de chaîne texte, un tableau des éléments de navigation souhaités dans l’ordre où vous voulez les voir apparaître
true / ‘all’ : tous les éléments de navigation
‘list’ : liste de raccourcis vers chacune des images
‘prev’ : bouton pour aller à l’image précédente
‘next’ : bouton pour aller à l’image suivante
‘toggle’ : bouton permettant de démarrer ou d’arrêter le défilement automatique
Défault : ['prev', 'list', 'next', 'toggle']
stopOnNav
Défini s’il faut arrêter le défilement automatique lorsque l’utilisateur utilise l’un des outils de navigation.
Défaut : false
width
La largeur à donner aux conteneurs d’image.
Avec la valeur ‘auto’, le script utilise la largeur de l’élément ciblé.
Défaut : ‘auto’
height
La hauteur à donner aux conteneurs d’image.
Avec la valeur ‘auto’, le script utilise la hauteur de l’élément ciblé.
Défaut : ‘auto’
containersClass
Permet d’ajouter la classe souhaitée aux conteneurs d’image.
Défaut : null
effect
L’effet appliqué lors de la transition entre deux images.
Valeurs possibles : ‘fadeOut’, ‘slideUp’, ‘hide’
Défaut : ‘fadeOut’
duration
La durée de transition entre deux images (en millisecondes)
Défaut : 500
afterInit
Une fonction de retour permettant d’agir après l’initialisation du BkgSlider.
Cette fonction aura pour paramètres l’élément ciblé et son BkgSlider.
Méthodes
move
Se déplacer dans la liste d’images.
Valeurs possibles : ‘next’, ‘prev’, ‘random’
Si aucun paramètre n’est passé, la direction donnée dans les options est utilisée.
changeTo
Allez à l’image de l’index spécifié.
Cette méthode requiert en paramètre l’index de l’image dans le tableau d’images (un nombre entre 0 et le nombre d’images -1).
play
Commencer l’animation automatique.
Cette méthode accepte un nombre de millisecondes en paramètre, représentant l’interval de temps entre deux changements d’image.
Si aucun paramètre n’est passé, la vitesse donnée dans les options est utilisée.
stop
Arrêter l’animation automatique.
