Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels jQuery

Devenez un professionnel de la programmatique Javascript grâce à la librairie la plus efficace du marché !

Tutoriels jQuery

Tutoriel jQuery : Faire un carrousel

Dans ce nouveau tutoriel jQuery, je vais tenter de vous expliquer comment fonctionne un carrousel (une galerie d’images) et comment en faire un vous-même !

Fonctionnement d’un carrousel

Tout d’abord, il faut comprendre le mécanisme une telle galerie d’image. Pour cela, seule la définition d’un carrousel réel pourrait suffire : Boîtier de forme circulaire servant à projeter des diapositives (cf. Mediadico). Dans ce tutoriel nous nous contenterons de créer un mécanisme qui se bloque vers la droite lorsque nous sommes positionnés au dernier item et se bloque vers la gauche lorsque nous sommes positionnés au premier. En XHTML/CSS, nous allons créer une bande de diapositives placée en arrière-plan et elle sera en partie visible à travers un bloc aux dimensions d’une seule diapositive. Un petit dessin valant mieux qu’un long discours, voici une vue de profil et de face expliquant cette notion de partie visible.

Schéma de profil d'un caroussel

Dans cette vue de profil, seule la diapositive C est visible au travers du bloc.

Schéma de face d'un caroussel

Enfin, dans cette vue de face plus habituelle, seule la diapositive C est visible au travers du bloc. Les autres étant masquées par le premier-plan.

Montage XHTML/CSS de base

Il faut poser une structure XHTML sur laquelle on travaillera en jQuery. Pour ce tutoriel, j’ai donc opté pour une liste de d’item avec les balises <ul> et <li>.

<ul class="carrousel">
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
	<li>E</li>
</ul>

En CSS, nous allons donner un style de bande de diapositives à cette liste.

.carrousel {
	margin:0;
	padding:0;
	height:75px;
}
.carrousel li {
	float:left;
	width:75px;
	height:75px;
	margin:0;
	padding:0;
	list-style:none;
	color:#FFF;
	font:3em/1.2 Georgia, "Times New Roman", Times, serif;
	text-align:center;
	background:#C00;
}

Et voilà le rendu :

  • A
  • B
  • C
  • D
  • E

A partir de ce moment, nous ne toucherons plus le code XHTML car nous le travaillerons en jQuery

.

Mise en place du carrousel avec jQuery

Lorsque le javascript est activé sur votre navigateur, il va être possible de créer notre carrousel.

Création de la fenêtre de visualisation

Nous allons créer rapidement grâce à jQuery la fenêtre de visualisation. Pour ce faire, nous devons faire plusieurs choses :

Créer un conteneur pour la bande de diapositives qui sera la fenêtre de visualisation
Grâce à la fonction wrap(), nous engloberons la liste d’une <div>.
Déterminer la taille de la fenêtre de visualisation
Nous prendrons comme référence les dimensions de la première diapositive.
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables :
		// Element de référence pour la zone de visualisation (ici le premier item)
		Reference = $(".carrousel li:first-child");
	// Ciblage de la bande de diapositives
	$(".carrousel")
		// Englobage de la liste par la zone de visualisation
		.wrap('<div class="carrousel-conteneur"></div>')
	// Ciblage de la zone de visualisation
	$(".carrousel-conteneur")
		// Application de la largeur d'une seule diapositive
		.css("width",  Reference.width()  )
		// Application de la hauteur d'une seule diapositive
		.css("height", Reference.height() )
		// Blocage des débordements
		.css("overflow", "hidden");
});

Ce qui a pour effet de ne rendre que le premier item de la liste visible :

  • A
  • B
  • C
  • D
  • E

Forcer la bande de diapositive à l’horizontal

Le fait de forcer la taille du conteneur de la liste à pour effet de faire passer à la ligne chaque diapositive. Comme le montre cette capture avec Firebug :

Pour éviter cet effet indésirable, nous devons fixer la largeur de la bande de diapositive. Ainsi il faut :

Connaître le nombre de diapositives
Nous allons cibler tous les élément <li> et resortir leur nombre grâce à la méthode length.
Fixer la largeur de la bande de diapositives
Il suffira de multiplier la largeur d’une seule diapositive par le nombre de diapositives.
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables :
		// Element de référence pour la zone de visualisation (ici le premier item)
		Reference = $(".carrousel li:first-child");
		// Nombre d'éléments de la liste
		NbElement = $(".carrousel li").length;
	// Ciblage de la bande de diapositives
	$(".carrousel")
		// Englobage de la liste par la zone de visualisation
		.wrap('<div class="carrousel-conteneur"></div>')
		// Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
		.css("width", (Reference.width() * NbElement) );
	// Ciblage de la zone de visualisation
	$(".carrousel-conteneur")
		// Application de la largeur d'une seule diapositive
		.width(  Reference.width()  )
		// Application de la hauteur d'une seule diapositive
		.height( Reference.height() )
		// Blocage des débordements
		.css("overflow", "hidden");
});

Ce qui donne :

  • A
  • B
  • C
  • D
  • E

Toujours avec Firebug, on voit bien maintenant que notre bande de diapositives est horizontale :

Création de la navigation

Maintenant que notre carrousel est en place, nous allons insérer les boutons de navigation permettant de changer de diapositive et instaurer des actions lors du clic sur ceux-ci.

Insertion des boutons

Nous allons insérer en XHTML (after()) après le conteneur ayant la classe CSS « carrousel-conteneur » une liste avec 2 boutons en prenant soin de les identifier avec une class CSS particulière. Un bouton pour la diapositive précédente, un autre pour la diapositive suivante.

// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables
	// […]
	// Ciblage de la bande de diapositives
	// […]
	// Ciblage de la zone de visualisation
	$(".carrousel-conteneur")
		// Application de la largeur d'une seule diapositive
		.width(  Reference.width()  )
		// Application de la hauteur d'une seule diapositive
		.height( Reference.height() )
		// Blocage des débordements
		.css("overflow", "hidden")
		// Insertion des boutons de navigation
		.after(''
			+	'<ul class="carrousel-pagination">'
			+	'	<li class="carrousel-prev"><button type="button">Précédent</button></li>'
			+	'	<li class="carrousel-next"><button type="button">Suivant</button></li>'
			+	'</ul>'
			+	'');
});

Ce qui donne :

  • A
  • B
  • C
  • D
  • E

Fonctionnement des boutons de navigation

Lors d’un clic sur le bouton « précédent » ou « suivant », à l’aide de jQuery nous allons déplacer la bande de diaposives placée en arrière-plan.

Par exemple, si nous sommes sur la diapositive A et que nous cliquons sur « suivant », la bande de diapositive va se déplacer vers la gauche afin de montrer la diapositive B. De même, si nous sommes sur la diapositive E et que nous cliquons sur « précédent », la bande de diapositive va se déplacer vers la droite afin de montrer la diapositive D.

Mathématiquement, cela se traduit ainsi : si nous sommes sur la diapositive 0 (lettre A) et que nous cliquons sur « suivant », la bande de diapositive va se voir appliquer une marge gauche de -75px (la taille d’une seule diapositive) pour afficher la diapositive B. De même, si nous sommes sur la diapositive 4 (lettre E) et que nous cliquons sur « précédent », la bande de diapositive va voir sa marge gauche passer de -300px (la taille de 4 diapositives) à -225px (la taille de 3 diapositives) pour afficher la diapositive D.

Pour bien comprendre, si nous faisons un petit tableau récapitulatif :

Calcul de la position Marge gauche du carrousel Illustration
Lettre A
(Diapositive 0)
- (Taille d’une diapo × Aucune diapositive) 0 Diapositive A visible
Lettre B
(Diapositive 1)
- (Taille d’une diapo × 1 diapositive) -75px Diapositive B visible
Lettre C
(Diapositive 2)
- (Taille d’une diapo × 2 diapositives) -150px Diapositive C visible
Lettre D
(Diapositive 3)
- (Taille d’une diapoe × 3 diapositives) -225px Diapositive D visible
Lettre E
(Diapositive 4)
- (Taille d’une diapo × 4 diapositives) -300px Diapositive E visible

Actions des boutons de navigation

Afin de savoir sur quelle diapositive nous sommes lorsque nous utiliserons le carrousel, nous allons instaurer un compteur. Un compteur est une variable à laquelle nous ajouterons 1 si nous cliquons sur « suivant » et nous oterons 1 si nous cliquons sur « précédent ». Elle nous servira à nous repérer pour afficher la bonne diapositive.

C’est parti :

$(document).ready(function() {
	// Code précédent
	// […]
	// Actions de navigation
		// Initialisation du compteur
		Cpt = 0;
		// Clic sur le bouton "Suivant"
		$(".carrousel-next button").click(function() {
			// Ajout +1 au compteur (nous allons sur la diapositive suivante)
			Cpt++;
			// Mouvement du carrousel en arrière-plan
			$(".carrousel").animate({
				marginLeft : - (Reference.width() * Cpt)
			});
		});
		// Clic sur le bouton "Précédent"
		$(".carrousel-prev button").click(function() {
			// Soustraction -1 au compteur (nous allons sur la diapositive précédente)
			Cpt--;
			// Mouvement du carrousel en arrière-plan
			$(".carrousel").animate({
				marginLeft : - (Reference.width() * Cpt)
			});
		});
});

Voici notre carrousel fonctionnel :

  • A
  • B
  • C
  • D
  • E

Limitation du carrousel

Notre carrousel est effectivement fonctionnel mais si vous l’avez tripoté un peu, vous avez dû vous apercevoir que l’on peut continuer d’aller vers la gauche après la diapositive A et continuer d’aller vers la droite après la diapositive E. Pour terminer ce tutoriel, il va donc falloir empêcher l’animation vers la gauche après la diapositive A et vers la droite après la diapositive E.

Rajoutons donc des tests (if()) : autorisons le bouton « précedent » lorsque notre compteur est supérieur à zéro et autorisons le bouton « suivant » lorsque notre compteur est inférieur au nombre de diaposives moins 1 (-1 car le compteur compte à partir de 0 et non 1).

$(document).ready(function() {
	// Code précédent
	// […]
	// Actions de navigation
		// Initialisation du compteur
		Cpt = 0;
		// Clic sur le bouton "Suivant"
		$(".carrousel-next button").click(function() {
			// Si le compteur est inférieur au nombre de diaposives moins 1
			if(Cpt < (NbElement-1) ) {
				// Ajout +1 au compteur (nous allons sur la diapositive suivante)
				Cpt++;
				// Mouvement du carrousel en arrière-plan
				$(".carrousel").animate({
					marginLeft : - (Reference.width() * Cpt)
				});
			}
            // fin du if
		});
		// Action du bouton "Précédent"
		$(".carrousel-prev button").click(function() {
			// Si le compteur est supérieur à zéro
			if(Cpt > 0) {
				// Soustraction -1 au compteur (nous allons sur la diapositive précédente)
				Cpt--;
				// Mouvement du carrousel en arrière-plan
				$(".carrousel").animate({
					marginLeft : - (Reference.width() * Cpt)
				});
			}
            // fin du if
		});
});

Voici donc notre carrousel finalisé !

  • A
  • B
  • C
  • D
  • E

Ce tutoriel de carrousel en jQuery n’est qu’un exemple parmi une multitude de possibilités de façon de faire. Mais j’espère tout de moins vous avoir fait comprendre le fonctionnement classique d’un tel mécanisme !

N’hésitez pas à dire si un point n’est pas assez clair !


Ce que nos lecteurs en disent :

  1. Gabriel

    Dernier détail si on copie-colle le code y a autre pb au moment où tu inclus le contrôle de la présence d’un élément dans la liste avant et après. Dans les 2 conditions "if" tu as oublié d’enlever le sélecteur de div #carrousel06 devant la class .carrousel. (qui sont utile dans ta page qui inclut 6 exemples mais pas pour le tuto…)

    Voilà une fois ça corrigé le code fonctionne bien en copier-coller :p

    • Shemu

      Merci Gabriel pour tes corrections de coquilles !

  2. Gabriel

    De rien mais t’as oublié de corriger celle là dans le dernier bloc de code :
    // Action du lien "Précédent"
    $("#carrousel-06 .carrousel-prev a").click(function() {

    il faut enlever le #carrousel-06

    Sinon merci à toi pour les tuto jQuery ça m’a permis de me faire un carrousel d’images assez sympa, je posterais un lien quand je l’aurais peaufiner et mis en ligne.

    • Shemu

      Ark ! Merci +1 !
      N’hésites pas à envoyer un lien une fois ton carrousel terminé.

  3. Gabriel

    Voilà mon petit carrousel d’image fait grâce à ce tuto :
    gabrieltavernier.fr/jquer…

    Et vivement le prochain tuto jQuery ;)

  4. Mikaweb

    Vraiment sympa comme Tuto.
    Plus facile de comprendre ainsi comment faire son carrousel, j’en utilise un avec Mootools et c’est vrai qu’avec Jquery c’était pas évident de trouver des informations.

  5. Guillaume

    Bonjour,

    Ce tuto est très utile mais je n’arrive pas à remplacer les liens "suivant" et "précédent" par des images "flèches gauche" et "flèche droite" DE CHAQUE CÔTÉ des vignettes. Je suis perdu dans les class des div.

    D’avance merci.

    • Shemu

      Tu peux modifier directement dans le code jQuery pour l’adapter à ton besoin (voir le chapitre Insertion des boutons).

  6. Ange Chierchia

    Super article, c’est vraiment bien expliqué, ça va me permettre de faire un carousel pour mon portfolio ;)

  7. Yo^p

    Super tuto. mais je ne comprends pas vraiment comment faire stopper le défilement dans le dernier volet…

  8. francis

    Salut à toi.
    Merci pour ce tutoriel facilement abordable.
    Mais je bloque sur un petit problème.
    Sais tu comment pointer sur B ou C ou D par défaut?

    • Shemu

      Il faut initialiser le compteur et placer un marge par défaut. Par exemple, si tu veux pointer par défaut sur la lettre « C », tu ajoutes au code :

      Cpt = 2; $(".carrousel").css("margin-left", - (Reference.width() * Cpt));
  9. raoul

    Hello,

    Sympa comme tutoriel, juste une question, les boucles for existent ?! (c’est une question ^^ ) Histoire que quand on arrive à la fin de la boucle on retourne sur la première image. ou un bête "else", c’est popible ? ^^

    Merci !!
    R.

  10. piloudu62

    Super tuto, je comprend un peu mieux le système..
    Mais es ce qu’il est possible d’afficher plusieurs éléments?
    Par exemple afficher ABC, puis DEF, etc…

    Merci ^^

  11. Z

    Wouah, je fais mes premiers pas en Jquery, et là, bravo pour ce tuto qui sait rendre les choses simples !
    J’ai juste rencontré un os :

    Pour une raison que j’ignore, le bloc .after( » +  » + …); n’a pas marché, j’avais une erreur sous FF. Après quelques recherches, j’ai dû le remplacer par $(".carrousel-conteneur").after(function() { return  » +  »…;});

    Impossible de remplacer .carroussel-conteneur par this, ce qui aurait été plus logique, ça ne marche pas non plus, ou même simplement .after(function() { return… }, qui ne marche pas non plus.

    Mais à ce détail près, c’est impeccable, je pense avoir compris le principe, ya plus qu’à adapter, merci !

  12. Mickael

    J’ai enfin trouvé un Plugin Jquery permettant l’affichage d’un carousel en 3D!
    application-net.fr/jquery…

  13. alanparish

    Bonjour, j’aimerai savoir comment intégrer un effet zoom à ce carrousel d’images s’il vous plait!

    Merci pour cet excellent tutoriel, il m’a appris beaucoup de choses en peu de temps, continuez comme ça!

  14. François

    Slt,
    super tuto simple, fonctionne du premier coup un petit bijoux pour bien comprendre le principe du carrousel et surtout pour bien comprendre ce que l’on fait sans utiliser betement un plugin sans savoir comment il fontionne.
    Une petite question comment faire pour automatiser les changement de dispo? tu aurais une idée?

    Merci

  15. Francois

    Super tutoriel. C’est très très rare un tutoriel aussi clair. Pas un seul point d’ombre sur un sujet tout de même compliqué. Bravo. Peut être le meilleur tutoriel que j’ai vu.

Les commentaires sont clos.