Un carrousel circulaire avec jQuery et jQuery Path

Je cherchais une autre utilisation à ce très bon plugin qu’est jQuery Path et j’ai pensé à un carrousel dont les éléments se déplacerait sur un cercle, rien de bien extraordinaire, mais un effet sympa et surtout un exercice plus dur que ce à quoi je m’attendais.

Tout d’abord je remercie Fabien pour son aide sans qui je n’aurais sans doute pas réussi, mais je pense qu’il a aussi bien apprécier ce petit casse-tête, dont voici le résultat.

La démo du carroussel

Cet effet n’est pas sans rappeler celui du plugin roundAbout, mais il apporte quelques différences notables qui pourraient être utiles à certains.

Voici la structure HTML :

  • image
  • image
  • image
  • image
  • image
  • image
  • image

Dans notre exemple le carrousel occupe toute la largeur de la page et les éléments du haut sortent du cadre.
Nous plaçons toutes les images (dont la taille peut varier) dans une liste toute simple. Puis nous ajoutons 2 boutons à sa suite. Tout simplement.

Puis vient le CSS :

#container {
	width:100%;
	overflow:hidden;
	height:500px;
}
#container ul {
	margin:200px auto;
	position:relative;
	width:370px;
}
#container li {
	list-style:none;
	position:absolute;
}
.gauche,
.droite { position:absolute; }
.gauche { left:200px; }
.droite { right:200px; }

Nous déclarons une taille au container pour qu’il puisse afficher les éléments, mais vous pouvez adapter à votre guise, de même que pour la liste.
Les éléments de la liste doivent être positionnés par rapport à celle-ci.

Encore du tout simple, j’aime ça! A ce stade tous vos éléments doivent s’afficher les uns sur les autres, pas de panique javascript va nous positionner tout ça.

Pour faire fonctionner ce script vous aurez donc besoin de jquery et de jQuery Path!
Allons-y pour le script :

var nombre = $("#container ul li").length;
	var ecart = 360/nombre;
	var posDep = 0;
	var posArr = 0;
	var current = 0;
	var centerX = 0;
	var centerY = -500;
	var radius = 500;
	for (i = 0; i < nombre; i++) {
		posDep = i*ecart;
		posArr = posDep - ecart;
		eval("var arc_params" + i +" = {center: [centerX, centerY],radius: radius,start: posDep,end: posArr,dir: 1}");
		$("#container li:eq(" + i + ")").animate({
			path: new $.path.arc(eval("arc_params" + i))
		},0);
	}
	$("button.gauche").click(function(){
		for (i = 0; i < nombre; i++) {
			var newstart = eval("arc_params" + i +".start;");
			var newend = eval("arc_params" + i +".end;");
			var dir = eval("arc_params" + i +".dir;");
			newstart = newend;
			newend += ecart;
			dir = 1;
			eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;");
			$("#container li:eq(" + i + ")").animate({
				path: new $.path.arc(eval("arc_params" + i))
			},500);
		}
	});
	$("button.droite").click(function(){
		for (i = 0; i < nombre; i++) {
			var newstart = eval("arc_params" + i +".start;");
			var newend = eval("arc_params" + i +".end;");
			var dir = eval("arc_params" + i +".dir;");
			newstart = newend;
			newend -= ecart;
			dir = -1;
			eval("arc_params" + i +".start = newstart; arc_params" + i +".end = newend; arc_params" + i +".dir = dir;");
			$("#container li:eq(" + i + ")").animate({
				path: new $.path.arc(eval("arc_params" + i))
			},500);
		}
	});

La première partie va définir les différentes variables utilisées, les images se placeront automatiquement suivant leurs nombres, super!!
Vous pouvez modifier le rayon du cercle et la position de son centre.
On ne peut utiliser que l'effet 'animate' avec jQuery Path, donc pour positionner les images on dit que cet effet dure 0 seconde, pour que ce soit instantané.

La suite (un peu redondante) va servir pour les événements de click. On redéfinit à chaque clique les positions de départ et d'arrivée et suivant le bouton on change la direction.

Voilà pour ce petit tuto, encore un peu rapide. J'espère que vous trouverez des applications ou que ça vous donnera des idées.

Merci de l'avoir lu et à bientôt!

6 réponses à “Un carrousel circulaire avec jQuery et jQuery Path”

  1. 1

    I love it!

    This gave me some great ideas for a gallery that I’m working on.

    Thanks!

    • 1.1
      admin dit :

      Thanks again Thiago!
      I’m glad it gave you some ideas, it’s the first goal of this blog.

      See you.

  2. 2
    jojo dit :

    hello guyz

    i’m in a web developper course ( i’ve just started)
    I did use that great caroussel in one of my school projet but i’ve got one probleme:
    the radius used in the rotation is too importante so more then half of my pics are oustide of my div container.

    if you got any idear let me know you will make an happy man ^^
    ————

    bonjour à tous
    j’utilise ce caroussel dans un de mes sujets de formation cependant j’ai un problème:
    le rayon de rotation est trop important et plus de la moitié de mes images se retouvent hors de ma « div:container »

    si l’un d’entre vous avait une bonne idée je suis plus que preneur ^^
    merci beaucoup!!

    • 2.1
      admin dit :

      Bonjour, merci à toi d’avoir essayé et adopté ce carrousel.

      En revenant sur ce tutoriel je me rends compte à quel point je fais les choses à moitié…
      J’aurais pu l’extraire sous forme de plugin, ça aurait été beaucoup plus clair.

      Pour ton problème, si je comprends bien tu veux réduire le rayon du cercle du carrousel.
      Pour cela il suffit de modifier la variable radius qui est vers le début du script. (var radius = 500;) Par défaut il est de 500.
      Il faudra probablement aussi modifier le centre de rotation par la suite. (var centerX = 0; et var centerY = -500;).

      Si j’ai répondu à côté de la plaque n’hésite pas à envoyer un lien vers ta page pour m’éclairer.

      Merci encore, bonne continuation avec jQuery :)

      • jojo dit :

        je suis un peu à « l’oues »t en effet après avoir écris mon post, je l’ai vu et changé
        en tout cas merci pour ta réponse rapide.
        joe

  3. 3

    [...] Un carrousel circulaire avec jQuery et jQuery Path « VirtuousWeb [...]