Jquery, forcer left à 0 avec animate()

Bonjour,

Une petite question qui doit paraître simple pour ceux qui maîtrisent Jquery ...

Je suis en train de développer un petit slider avec vignettes de navigation et images qui s'affichent au clic, en m'inspirant des différents tutoriels que j'ai trouvé sur le Net.
Par ailleurs, étant donné qu'au final je ne pourrai pas maîtriser le nombre de vignettes (affichées en ligne horizontale les unes à la suite des autres), j'ai fouillé du côté d'animate() pour régler mon affaire.

$("#galerie_big img").hide();
$("#galerie_nav a").click(function(){
     if($("#" + this.rel).is(":hidden")){
          $("#galerie_big img").hide();
          $("#" + this.rel).show();
     }
});
$("#btn_prec").click(function() {$("#galerie_nav").animate({"left": "-=50px"},"slow");});
$("#btn_suiv").click(function() {$("#galerie_nav").animate({"left": "+=50px"},"slow");});

Mais là, question :

Avec animate(), comment empêcher que ma DIV contenant mes vignettes ne se déplacent indéfiniment sur la gauche ou la droite selon le clic de l'utilisateur ?
Quel est le moyen pour le forcer à stopper l'animation si left atteint 0 (et ce, même en pleine animation) et même question pour le côté droit...?
Bref, comment faire pour que mes vignettes ne disparaissent pas à force de cliquer mais restent dans mon DIV conteneur ?

Si vous avez une solution, merci d'avance !

Hello,

Souvent il suffit de vérifier au clic s'il existe encore des images à visualiser avant ou après ton image active (visible).

$("#btn_suiv").click(function() {
   if($("#galerie_nav .img_visible").next('img').size()==0) {
      $("#galerie_nav").animate({"left": "0px"},"slow");
   }
   else {
      $("#galerie_nav").animate({"left": "-=50px"},"slow");
   }
return false;
}); 

S'il existe encore des img à la suite de l'image visible, alors on continu à faire défiler, sinon on revient au début (ou à la fin dans l'autre situation).

Je te laisse adapter ce code à ta situation (li, span ou div au lieu de simples img) et le compléter (attribut d'une classe à l'élément visible, utiliser la fonction prev pour le clic sur le bouton précédent, etc.)

C'est une idée parmi d'autres possibles
J'espère ne pas avoir répondu à côté...
Bon courage.

Ca peut ressembler à la réponse que je recherche mais je n'ai pas tout compris...
A quoi correspond mon "image visible" ?

Pour info, voici le code côté HTML

<div id="galerie" style="position:relative;background-color:#edeff4">
  <span id="btn_prec">précédent</span>
  <div id="nav_conteneur" style="position:absolute;left:0px;width:100px;height:50px;overflow:hidden">
  <div id="galerie_nav" style="position:absolute;left:0px;background-color:#00a7e7;width:520px;height:50px">
    <a rel="img1" href="#"><img src="graph/photos/9.jpg" width="50" height="50" /></a>
    <a rel="img2" href="#"><img src="graph/photos/25.jpg" width="50" height="50" /></a>
    <a rel="img3" href="#"><img src="graph/photos/13.jpg" width="50" height="50" /></a>
    <a rel="img4" href="#"><img src="graph/photos/8.jpg" width="50" height="50" /></a>
  </div>
  </div>
  <span id="btn_suiv">suivant</span>
  <div id="galerie_big">
    <img id="img1" src="graph/photos/9.jpg" /><br />
    <img id="img2" src="graph/photos/25.jpg" /><br />
    <img id="img3" src="graph/photos/13.jpg" /><br />
    <img id="img4" src="graph/photos/8.jpg" /><br />
  </div>
</div>

Quand je teste ton code sur le bouton précédent, ma DIV "galerie_nav" revient toujours à left:0, même si j'ai appuyé plusieurs fois sur suivant (par exemple 3 fois, donc mon left est de 150px à ce moment-là)...

Bref, il y a un truc qui m'échappe ! Je ne sais pas si on parle du même système de slider.
Dans mon cas, la ligne contenant les vignettes à une largeur que je ne peux pas connaître à l'avance. Elle est donc dans un conteneur qui lui a une largeur fixe. Et les boutons "précédent" et "suivant" ne font que remplacer une barre de scroll classique, sauf qu'un clic sur un bouton équivaut à plus ou moins 50pixels. (un peu comme les boutons haut et bas des scrolls classiques en fait !).