Voir la démo : carrousel automatique

1. Les inclusions

• Inclure JQuery
• Inclure carrousel.js
• Inclure carrousel.css

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">
<!-- div obligatoire -->
<div class="interieur-carroussel">
<!-- div obligatoire -->
<div class="items">
<!-- chaque élément doit être dans un div class item -->
<div class="item">
<img src="images/1.png" alt="" />
</div>
<div class="item">
<img src="images/6.png" alt="" />
</div>
</div>
</div>
<!-- div obligatoire (placement des témoins) -->
<div class="temoins"></div>
</div>

3. Personnalisation

La feuille de style carrousel.css contient déjà tout ce qui est générique pour styler votre carrousel. Vous n’avez plus qu’à ajouter dans votre feuille de style les éléments de largeur et de hauteur propre à votre carrousel, en utilisant l’indentifiant de votre caroussel.

Voici les éléments que vous devez obligatoirement styler : (les nombres sont des exemples)

#mon-carrousel{
width:531px; /* la largeur totale du carrousel */
height:373px;	/* la hauteur totale du carrousel (prévoir la place pour le div.temoins) */
}

#mon-carrousel .interieur-carrousel
{
margin-left:0px; /* décalage entre le début du caroussel et l'endroit où disparaissent les images */
margin-top:0px; /* décalage par rapport à en haut du carrousel */
width: 533px; /* la largeur de l'interieur = (largeur d'un item + margin right d'un item)*(nombres d'item étant apparants en même
temps) */
height:331px;	/* la hauteur d'un item */
}

#mon-carrousel .item{
width:259px;	/* la largeur d'un item */
margin-right:13px; /* son espacement éventuel par rapport à l'item suivant */
height:331px; /* la hauteur d'un item */
}

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(window).load(
function(){
carrousel('mon-carrousel',272,2,3000,1000,'left','images/on.png','images/off.png');
}
);

La fonction carrousel prend comme arguments :

• l’id du carrousel à animer
• la largeur à déplacer (largeur d’un item+son margin éventuel)
• le nombre d’éléments par “page” (nombre d’éléments qui se déplacent à chaque itération)
• la vitesse de déplacement (’slow’,’normal’,’fast’, ou un nombre de milli-secondes)
• le temps de pause entre chaque itération (en milli-secondes)
• le sens de départ du carrousel (laisser left)
• le chemin de l’image représentant le témoin de page allumé
• le chemin de l’image représentant le témoin de page éteint

Voir la démo : carrousels horizontaux

1. Les inclusions

- Inclure JQuery
- Inclure carrousel.js
- Inclure carrousel.css

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">

	<!-- flèche pour la navigation -->
	<a href="#" class="prev">&lt;</a>

		<!-- div obligatoire -->
		<div class="interieur-carrousel">

			<!-- div obligatoire -->
			<div class="items">

				<!-- chaque élément doit être dans un div class item -->
				<div class="item">
					Du html, ça peut être du texte, une image...
				</div>

				<div class="item">
					Autre séquence html, ça peut être du texte, une image...
				</div>

			</div>

		</div>
		<a href="#" class="next">&gt;</a>
	</div>
</div>

3. Personnalisation

La feuille de style carrousel.css contient déjà tout ce qui est générique pour styler votre carrousel. Vous n’avez plus qu’à ajouter dans votre feuille de style les éléments de largeur et de hauteur propre à votre carrousel, en utilisant l’indentifiant de votre caroussel.

Voici les éléments que vous devez obligatoirement styler : (les nombres sont des exemples)

#mon-carrousel{
	width:350px; /* la largeur totale du carrousel */
	height:190px;	/* la hauteur totale du carrousel */
}
#mon-carrousel .next
{
	right:15px; /* le positionnement de la flèche "suivant" par rapport à en haut à droite */
	top:90px;
}
#mon-carrousel .prev
{
	left:15px; /* le positionnement de la flèche "précédente" par rapport à en haut à gauche */
	top:90px;
}

#mon-carrousel .interieur-carrousel
{
	margin-left:70px; /* décalage entre le début du caroussel et l'endroit où disparaissent les images */
	margin-top:17px; /* décalage par rapport à en haut du carrousel */
	width: 630px; /* la largeur de l'interieur = (largeur d'un item + margin right d'un item)*(nombres d'item étant apparants en même temps) */
	height:150px;	/* la hauteur d'un item */
}

#mon-carrousel .item{
	width:200px;	/* la largeur d'un item */
	margin-right:10px; /* son espacement éventuel par rapport à l'item suivant */
}

Vous pouvez évidement styler d’avantage, mettre des background, etc. !

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(document).ready(

	function(){
		carrousel('mon-carrousel',560,1,3000);
	}
);

La fonction carrousel prend comme arguments :
- l’id du carrousel à animer
- la largeur à déplacer (largeur d’un item+son margin éventuel)
- le nombre d’éléments étant apparents en même temps
- la vitesse de déplacement (’slow’,'normal’,'fast’, ou un nombre de millisecondes)

function centerThis(element) {
	$(element).css({
		'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
		'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
	});
}

À utiliser comme ceci :

centerThis('#ZoomPhoto');

Attention, cette fonction ne fait que déterminer la position de l’élément concerné. S’il est caché (display: none), n’oubliez pas de le montrer suite à l’appel de cette fonction…

Mais attendez… “Houston ? We have a problem…”

En effet, pour l’instant, si le viewport est plus petit que l’élément à centrer, certaines parties de l’élément se retrouvent en dehors du viewport et ne sont donc pas visibles… C’est le genre de problème qui ne saute pas tout de suite aux yeux lorsque le bureau arbore fièrement un écran de 20 pouces et plus…

Corrigeons donc cette anomalie, pour le bien des mobinautes et de leurs écrans 7 pouces…

function centerThis(element) {
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var elementHeight = $(element).height();
	var elementWidth = $(element).width();

	var elementTop, elementLeft;

	if (windowHeight <= elementHeight) {
		elementTop = $(window).scrollTop();
	} else {
		elementTop = ((windowHeight - elementHeight) / 2) + $(window).scrollTop();
	}

	if (windowWidth <= elementWidth) {
		elementLeft = $(window).scrollLeft();
	} else {
		elementLeft = ((windowWidth - elementWidth) / 2) + $(window).scrollLeft();
	}

	$(element).css({
		'top': elementTop,
		'left': elementLeft
	});
}

Et voilà ! L’élément est centré, quelle que soit la taille du viewport…

Une dernière chose, ça fonctionne sous IE6…

Aussi, afin de mettre en place quelque chose de plus personnel et de moins gourmand je vous propose d’apprendre à réaliser simplement votre propre carrousel à l’aide de jquery.

Un carrousel, à quoi ça sert ?

L’objectif de ce script consiste à afficher sur une page (html) une liste d’objet (potentiellement infinie) dont un nombre limité seulement sera visible par l’utilisateur. Il sera bien sûr complété par une interface de navigation pour parcourir ce “catalogue” d’objets (qui peuvent être des vignettes des textes ou encore des vidéos). Les applications sont donc multiples : diaporama photo, diaporama produit, ou encore module d’actualités.

Ce dont vous avez besoin pour commencer.

Avant toute chose, il convient de déterminer avec précision l’apparence finale de votre carrousel. En effet, pour que l’affichage fonctionne correctement sur tous les navigateurs (et c’est aussi le but), il conviendra d’être précis et méticuleux. En premier lieu donc, commencez par mesurer (en pixels) l’espace dont vous disposez pour l’affichage du carrousel. Dans notre exemple, le carrousel sera horizontal ce qui signifie que j’ai besoin de connaître la largeur totale de l’espace qui accueillera la navigation, par exemple de mon diaporama.

Comme le montre l’image ci-dessus, cette mesure doit tenir compte de l’ensemble des éléments qui constituent votre navigation. Ensuite, il convient généralement de sortir la calculatrice pour déterminer d’autres paramètres très important :

• La nombre d’éléments visibles au chargement du carrousel (ici 6).
• La dimension (précise) de chaque éléments (ne pas oublier les bordures éventuelles…).
• L’espacement entre chaque objet (ici 10 pixels qui seront obtenus par une “margin-right”).

Dans notre exemple, chaque élément visible occupera donc une largeur totale de 96px. (80 de largeur + 6 de bordure (3 de chaque côté) +10 de marge droite). Soit un total de 576 pixels nécessaires pour l’affichage de 6 éléments. Si vous avez suivi, il nous reste donc 12 pixels à droite et à gauche de nos vignettes qui serviront à l’affichage de la navigation (par exemple avec de petites flèches explicites.

Et maintenant on fait quoi ?

Une fois que le gabarit de votre Carrousel est déterminé, il convient de le créer en HTML. Pour cela je vais utiliser deux conteneurs, deux liens et une liste non ordonnées :

<!--Le premier conteneur qui englobe l'intégralité de la navigation-->
<div id="navigation">
<!--Le lien pour reculer dans notre diaporama-->
<a href="#" id="prev" class="first"><img src="left.jpg" alt="Précédent" width="10" height="10" border="0"/></a>
<!--Le second contenur qui englobe les objets-->
<div id="thumb">
<!--Le liste des objets-->
<ul id="defileur">
<li class="pdt" id="a0"><img src="vign4.jpg" /></li>
<li class="pdt" id="a1"><img src="vign1.jpg" /></li>
<li class="pdt" id="a2"><img src="vign2.jpg" /></li>
<li class="pdt" id="a3"><img src="vign3.jpg" /></li>
<li class="pdt" id="a4"><img src="vign4.jpg" /></li>
<li class="pdt" id="a5"><img src="vign5.jpg" /></li>
<li class="pdt" id="a6"><img src="vign6.jpg" /></li>
<li class="pdt" id="a7"><img src="vign2.jpg" /></li>
<li class="pdt" id="a8"><img src="vign5.jpg" /></li>
<li class="pdt" id="a9"><img src="vign2.jpg" /></li>
<li class="pdt" id="a10"><img src="vign4.jpg" /></li>
<li class="pdt" id="a11"><img src="vign5.jpg" /></li>
<li class="pdt" id="a12"><img src="vign6.jpg" /></li>
<li class="pdt" id="a13"><img src="vign2.jpg" /></li>
<li class="pdt" id="a14"><img src="vign5.jpg" /></li>
<li class="pdt" id="a15"><img src="vign2.jpg" /></li>
</ul>
</div>
<a href="#" id="next"><img src="right.jpg" alt="Suivante" width="10" height="10" title="Suivant" border="0"/></a>
</div>

Peu importe le html que vous souhaitez utiliser, 2 choses sont importantes dans le code ci-dessus :

1. La class “first” que j’ajoute sur le premier lien : elle servira à le masquer lors de l’amorce (puisqu’aucune navigation vers la gauche sera possible au lancement).
2. La class “pdt” toujours identique spécifiée sur chaque éléments de la liste : elle servira à compter au chargement de la page combien j’ai d’éléments dans ma liste.

Attaquons nous maintenant au javascript qui va nous permettre de rendre tout ça interactif et nous rapprocher du but. Avec un petit script simple, qui utilisera la puissance de jquery et nécessitant très peu de paramètre hormis le nombre d’éléments visibles au chargement (6 dans notre exemple) qui sera passé en “constante” de configuration.

//On s'assure d'abord que le document est chargé :
$(document).ready(function(){
//On configure notre script en lui indiquant le nombre d'objet visible en même temps :
var nbdisplay = 6;
//Puis on compte le nombre d'objet présent dans notre liste, à adapter peut-être à votre html
var nbobjet = $('#defileur').children('li.pdt').size();
//Enfin on amorce une variable à 0 qui va nous permettre de nous repérer dans la navigation
var repere = 0;
//On crée ensuite deux fonctions assigné sur chacun de nos boutons de navigation :
//La fonction qui permet d'avancer dans le carrousel est assigné au lien possédant l'id "next" :
$('#next').click(
function () {
if ($(this).is(".last")==false) //je n'active la fonction que si je ne suis pas sur le dernier élément
{
repere++; //j'incrémente ma variable de repère
$("#defileur").animate({"left": "-=96px"}, "slow");//je déplace vers la gauche mon conteneur de largeur totale d'un élément (element+marge+bordure).
$('#prev').removeClass();//j'enlève la classe du lien "précedent" pour le faire apparaitre puisque désormais je peux naviguer en arrière.
if((repere+nbdisplay)==nbobjet){//enfin, je calcule si je ne suis pas au bout de ma liste.
$(this).addClass("last");//le cas écheant, j'ajoute une classe au bouton pour le faire disparaitre.
}
}
return false;
});
//La fonction qui permet de reculer dans le carrousel est assigné au lien possédant l'id "prev" :
$('#prev').click(
function () {
if ($(this).is(".first")==false) {
$("#defileur").animate({"left": "+=96px"}, "slow");
repere--;
$('#next').removeClass();
if(repere==0){
$(this).addClass("first");
}
}
return false;
});
});

Il ne me reste plus qu’à ajouter une couche essentielle. La feuille de style. Qui va servir à masquer articiellement les objets qui dépasse le quota autoriser (ici 6) et à afficher et/ou masquer les boutons servant à la navigation.

*{
margin:0;
padding:0;
}
#navigation{
position:absolute;
width:600px;
left:0px;
top:0px;
}
#thumb{
width: 576px;
height:56px;
overflow:hidden;
position:relative;
left:14px;
}
#defileur {

position:absolute;
left:0px;
top:0px;
}
#defileur li {
float:left;
list-style:none;
width:80px;
height:50px;
margin-right:10px;
overflow:hidden;
border:solid 3px #C7922D;
}
.last,.first{
visibility:hidden;
}
#prev{
position:absolute;
top:25px;
left:0;
}
#next{
top:25px;
position:absolute;
left:590px;
}

Voilà, nous y sommes, le carrousel est terminé et permet de naviguer image par image dans notre collection de vignettes.

La démo du script achevé est disponible ici.