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.