Le Pavillon d'or, avec du html !
Installation
Pour installer Complete Slideshow, placez les codes ci-dessous dans votre code HTML.

Entre les balises <head></head> :
<linkCache rel="stylesheet" type="text/css" href="slider.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript">
$(function(){
	$("#contenuSlider").slideshow({
		//Configuration
	});
});
</script>

Entre les balises <body></body> :
<div id="nav">
	<div id="conteneurSlider">
		<div id="contenuSlider">
			//Images
			<img src="monImage_01.jpg" alt="Mon image" />	
			<img src="monImage_02.jpg" alt="tHtml01" />	
		</div>
	</div>
</div>
<div id="tHtml01" class="divTitre">Mon titre <em>avec du html<em></div>

<div id="nav">
	<div id="conteneurSlider">
		<div id="contenuSlider">
			//Divs
			<div class="slide">Contenu de mon div</div>	
		</div>
	</div>
</div>

Vous pouvez changer l'ID des différents éléments, mais il faudra le préciser dans l'appel de la fonction et la configuration. Consultez la partie concernant la configuration pour plus d'informations. N'oubliez pas de déclarer la propriété "display:none" pour la classe "divTitre" (cette propriété est déclarée par défaut dans la feuille de style de Complete Slideshow).

Configuration
Vous pouvez utiliser Complete Slideshow avec la configuration de base intégrée dans le fichier JavaScript, ou écraser une partie de la configuration de base avec votre propre configuation.

Pour utiliser une configuration personnalisée, modifiez la fonction JavaScript en suivant le modèle ci-dessous.
<script type="text/javascript">
$(function(){
	$("#contenuSlider").slideshow({
		defilement:'vertical',
		navigation:'points',
		vitesse:'200'
	});
});
</script>

La liste des options de configuration est disponible ci-dessous.

Complete Slideshow API
navId (chaine)
L'identifiant du conteneur de la barre de navigation. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navId:'#nav'
	});
});
L'identifiant par défaut est "#nav".

conId (chaine)
L'identifiant du conteneur du slideshow. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		conId:'#conteneurSlider'
	});
});
L'identifiant par défaut est "#conteneurSlider".

typeSlide (img|.classe)
Le type ou la classe des éléments du SlideShow. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		typeSlide:'.divSlide'
	});
});
Le type par défaut est "img".

navFl (booléen)
Active ou désactive les flèches de navigation. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navFl:true
	});
});
La valeur par défaut est "true".

navFlGaClass (chaine)
La classe CSS de la flèche de navigation gauche, si activée. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navFl:true,
		navFlGaClass:'flecheGauche'
	});
});
La classe par défaut est "flecheGauche".

navFlDrClass (chaine)
La classe CSS de la flèche de navigation droite, si activée. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navFl:true,
		navFlDrClass:'flecheDroite'
	});
});
La classe par défaut est "flecheDroite".

defilement (horizontal|vertical|transitions)
La méthode de défilement des images. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		defilement:'horizontal'
	});
});
La valeur par défaut est "horizontal".

titre (booléen)
Active la barre de titre des images.Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		titre:true
	});
});
La valeur par défaut est "true".

titreClasse (chaine)
La classe CSS de la barre de titre, si activée. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		titre:true,
		titreClasse:'titre'
	});
});
La classe par défaut est "titre".

titreConClass (chaine)
La classe CSS du contenu de la barre de titre, si activée. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		titre:true,
		titreConClass:'titreContenu'
	});
});
La classe par défaut est "titreContenu".

navType (nombres|points|images)
La méthode de navigation principale. Aucune valeur désactivera la navigation. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:points
	});
});
La valeur par défaut est "nombres".

navBarClass (chaine)
La classe CSS de la barre de navigation. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:points,
		navBarClass:'navigation'
	});
});
La classe par défaut est "navigation".

activeClass (chaine)
La classe CSS du bouton de navigation de l'image active. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:points,
		activeClass:'active'
	});
});
La classe par défaut est "active".

navNoConClass (chaine)
La classe CSS du conteneur des boutons de navigation de type "nombres". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:nombres,
		navNoConClass:'nombres'
	});
});
La classe par défaut est "nombres".

navNoClass (chaine)
La classe CSS des boutons de navigation de type "nombres". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:nombres,
		navNoClass:'nombresBoutons'
	});
});
La classe par défaut est "nombresBoutons".

navPoConClass (chaine)
La classe CSS du conteneur des boutons de navigation de type "points". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:points,
		navPoConClass:'points'
	});
});
La classe par défaut est "points".

navPoClass (chaine)
La classe CSS des boutons de navigation de type "points". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:points,
		navPoClass:'pointsBoutons'
	});
});
La classe par défaut est "pointsBoutons".

navImConClass (chaine)
La classe CSS du conteneur des boutons de navigation de type "images". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:images,
		navImConClass:'images'
	});
});
La classe par défaut est "nombres".

navImClass (chaine)
La classe CSS des boutons de navigation de type "images". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:images,
		navImClass:'imagesBoutons'
	});
});
La classe par défaut est "imagesBoutons".

navImChemin (chaine)
Le chemin d'accès des images miniatures pour la navigation de type "images". Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navType:images,
		navImChemin:'images/small/'
	});
});
Le chemin par défaut est "images/small/".

autoplay (booléen)
Active le défilement automatique des images. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		autoplay:false
	});
});
La valeur par défaut est "false".

pause (nombre)
Temps d'arrêt sur chaque image en cas de défilement automatique, en millisecondes. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		autoplay:false,
		pause:1500
	});
});
La valeur par défaut est "1500".

vitesse (nombre)
Vitesse de défilement des images lors d'un changement d'image, en millisecondes. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		vitesse:1000
	});
});
La valeur par défaut est "1000".
Combinez les options pour configurer le slideshow selon vos envies
Navigation verticale sans flèches de navigation à une vitesse de 250, défilement automatique. Afficher l'exemple
$(function(){
	$("#contenuSlider").slideshow({
		navigation:'vertical',
		navFl:false,
		autoplay:true,
		vitesse:250
	});
});


Exemples