Besoin d'aide sur carrousel

Bonjour !
J'espère trouver un peu d'aide sur ce forum parce que je suis bloqué sur mon caroussel , je n'arrive pas à obtenir le résultat escompter ...

Voici le résultat que j'obtiens :
http://img809.imageshack.us/i/carrousel.jpg/

Le résultat final devrait ressembler à ce site là :
http://www.games-workshop.com/gws/home.jsp

Je dois donc obtenir une image à droite en grand ( c'est bon je l'obtiens) et mes boutons à gauche ( le rectangle se transforme en rectangle avec flèche lorsque c'est le bouton correspondant à l'image , j'obtiens aussi ce résultat là ) donc pour l'instant tout va bien ...
Mon problème est qu'il y a automatiquement des numéros qui se mettent dans mes boutons ( 1,2 et 3 ) je ne sais pas comment les supprimer car j'aimerais mettre du texte à la place ... ou a défaut le placer à travers une image remplaçant le bouton vierge ( mais là aussi problème car mon javascript ne comporte qu'une seule "navigation"ce qui fait que je ne dispose que de l'image du bouton vierge et du bouton en hover ... je ne peux donc pas personnaliser chaque bouton puisque je ne peux avoir que 2 modèles en clair ( le normal et celui avec flèche donc si je mets du texte ce sera le même partout ...

Voici mon code javascript:

var carrousel = {

   nbSlide : 0,
   nbCurrent : 1,
   elemCurrent : null,
   elem : null,
   timer : null,

   init : function(elem){
      this.nbSlide = elem.find(".slide").length;
    
     //Créer la pagination
     elem.append('<div class="navigation"></div>');
     for(var i=1;i<=this.nbSlide;i++){
       elem.find(".navigation").append("<span>"+i+"</span>")
     }
     elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})
    
     //Initialisation du carrousel
     this.elem=elem;
     elem.find(".slide").hide();
     elem.find(".slide:first").show();
     this.elemCurrent = elem.find(".slide:first");
     this.elem.find(".navigation span:first").addClass("active");
    
     //On créer le timer
     carrousel.play();
     //Stop quand on passe dessus
     elem.mouseover(carrousel.stop);
     elem.mouseout(carrousel.play);
   },
   
   gotoSlide : function(num){
      if(num==this.nbCurrent){ return false; }
    
     /*Animation en fadeIn/fadeOut
      this.elemCurrent.fadeOut();
     this.elem.find("#slide"+num).fadeIn();
     */
    
     /*Animation en slide
     var sens = 1;
     if(num<this.nbCurrent){ sens = -1;}
     var cssDeb = {"left" : sens*this.elem.width() };
     var cssFin = {"left" : -sens*this.elem.width() };
     this.elem.find("#slide"+num).show().css(cssDeb);
     this.elem.find("#slide"+num).animate({"top":0,"left":0,},500)
     this.elemCurrent.animate(cssFin,500);
     */
    
     this.elemCurrent.fadeOut();
      this.elem.find("#slide"+num).show();
      this.elem.find("#slide"+num).hide().fadeIn();
    
     var titleHeight = this.elemCurrent.find(".title").height();
    
      this.elemCurrent.find(".title").animate({"bottom":-titleHeight},500);
      this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom": 0},500);
    
    
    
     this.elem.find(".navigation span").removeClass("active");
     this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
     this.nbCurrent = num;
     this.elemCurrent = this.elem.find("#slide"+num);
   },
   
   next : function(){
      var num = Number(this.nbCurrent)+1;
     if(num >this.nbSlide){
         num =1;
     }
     this.gotoSlide(num); 
   },
   prev : function(){
      var num = this.nbCurrent-1;
     if(num< 1){
         num = this.nbSlide;
     }
     this.gotoSlide(num); 
   },
   stop : function(){
      window.clearInterval(carrousel.timer);
   },
   play : function(){
      window.clearInterval(carrousel.timer);
      carrousel.timer = window.setInterval("carrousel.next()",6000);
   }
     
}

$(function(){
  carrousel.init($("#carrousel"));
});

Mon code css:

#carrousel{
border:solid 2px #CDC3A2;
width:975px;
height:331px;
margin:44px 0 0 10px;
position:relative;
overflow:hidden;
}

.slide{
position:absolute;
top:0;
left:0;
width:975px;
height:331px;
}

.title{
position:absolute;
height:35px;
bottom:0;
left:0;
width:975px;
padding-left:15px;
line-height:35px;
background:url(theme/barre_carrousel.png);
color:#000000;
font-size:18px;
}

.navigation{
position:absolute;
top:-1px;
}

.navigation span{
position:relative;
background:url(theme/case_carrousel.jpg) no-repeat;

cursor:pointer;
height:113px;
width:337px;
display:block;

}

.navigation span:hover,.navigation span.active{
background:url(theme/case_carrousel_hover.png) no-repeat;
}

et le HTML concerné :

<div id="carrousel">
	   
		     <div id="slide1" class="slide">
			     <div class="visuel">
				    <img src="theme/carrousel_berek_raff.jpg"/>
			     </div>
			     <div class="title">
				  
			     </div>
	             </div>
			 
		     <div id="slide2" class="slide">
			     <div class="visuel">
				    <img src="theme/carrousel_berek.jpg"/>
			     </div>
			     <div class="title">
				   
			     </div>
		     </div>
			 
		     <div id="slide3" class="slide">
			     <div class="visuel">
				    <img src="theme/carrousel_brother_rafiel_raff.jpg"/>
			     </div>
			     <div class="title">
				  
			     </div>
		     </div>
</div>

J'ai réalisé ce carrousel à travers un tuto car mes compétences en javascipt sont quasi nul... c'est pourquoi j'aurai besoin d'un gros coup de pouces .
On m'a dit que j'avais créer mon span navigation avec jQuery et qu'il faut le faire en HTML et enlever la partie jQuery qui le créer ...et ensuite adapter le code.
Mais je n'y arrive pas je suis complètement bloqué ... j'espère qu'une âme charitable voudra bien se pencher sur mon problème
Merci d'avance,
Cordialement.

Bonsoir,

pour ton probleme de numéro :

 elem.find(".navigation").append("<span>"+i+"</span>")

le "i", il sert ici à indiquer à quel numéro de la boucle de création du menu tu es, à remplacer par un le texte, je présume que c'est le titre que tu veux récupérer alors il faudra que tu le récupére ainsi :

$("#slide"+i).find(".title").val();

à tester pour cette partie la, la concaténation pour l'id d'un élément en jQuery, je n'ai pas encore testé, donc je ne suis pas sur du résultat, à confirmer.

si tu as des questions, n’hésite pas, teste ce que je viens de te donner et tiens moi au courant.

Merci pour ta réponse mais comme je l'ai j'ai réalisé ce carrousel grâce à un tuto car je suis nul en javascript ...
Ainsi ou dois-je intégrer ton deuxième code ?

En tous cas merci pour la réponse

Ça ne marche ps malheureusement , enfin si les numéros disparaissent mais si je clique sur un bouton le défilement automatique s'arrête et les images du carrousel n'apparaissent plus ...
Merci quand même pour ta réponse c'est sympa

Super merci pour ton aide Vraiment sympa !