11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'ai mis en place un slider pour un site que je développe à partir de cet excellent tuto:
http://babylon-design.com/tutoriel-jquery-faire-un-carrousel/

Pour le moment donc, le slider se déplace d'une largeur fixe (var Reference dans le tuto).
Hors, je souhaiterais pouvoir intégrer des images de différentes largeur.

Il faudrait, je suppose, qu'en fonction du compteur, on aille rechercher la largeur de l'image (peut-être avec la propriété css nth-child?) mais je ne sais pas comment faire...

Si quelqu'un a une idée sur la logique à suivre, cela m'aiderait beaucoup! Smiley smile

Merci d'avance.
Petit up, voici le code actuel:
$(document).ready(function() {
		Reference = $(".carousel li:first-child");
		NbElement = $(".carousel li").length;
	$(".carousel")
		.wrap('<div class="carousel-conteneur"></div>')
		.css("width", ((Reference.width() * NbElement) + ('10' * NbElement)) ); 
	$(".carousel-conteneur")
		.height( Reference.height() )
		.css("overflow", "hidden");
		Cpt = 0;
		$(".carousel-next img").click(function() {
			if(Cpt < (NbElement-1) ) {
				Cpt++;
				$(".carousel").animate({
					marginLeft : - ((Reference.width() * Cpt) + (10 * Cpt))
				});
			}
		});
		$(".carousel-prev img").click(function() {
			if(Cpt > 0) {
				Cpt--;
				$(".carousel").animate({
					marginLeft : - ((Reference.width() * Cpt) + (10 * Cpt))//10 =carousel li margin-right
				});
			}
		});
});


Je devrais donc remplacer la Reference par une variable que je n'arrive pas à exprimer...
.carousel li:nth-child pour cpt=n
Quelqu'un me suit? Smiley bawling