Carrousel, besoin d'aide

Hello,

J'ai suivi le même tutoriel, sauf que moi je voudrai pouvoir y intégré une navigation avec des boutons suivant et précédent.

Quelqu'un peut me dire comment procéder ?

Merci a vous.

Voici le code que j'ai :

<div id="contentP"> <!-- Contenu Principal -->
			<!-- Flêches navigation -->
				<div id="prev">
					<img src="../images/prev.png" alt=""/>
				</div>
				<div id="next">
					<img src="../images/next.png" alt=""/>
				</div>
			<!-- Fin Flêches navigation -->
				<!-- Carrousel -->
				<div id="carrousel">
					<div id="slide1" class="slide">
						<div class="visu">
							<img src="../images/slide1.jpg/" alt=""/>
						</div>
						<div class="titre">
							titre1
						</div>
						<div class="description">
							<p>blabla</p>
						</div>
					</div>

					<div id="slide2" class="slide">
						<div class="visu">
							<img src="../images/slide2.jpg/" alt=""/>
						</div>
						<div class="titre">
							titre2
						</div>
						<div class="description">
							<p>blabla</p>
						</div>
					</div>
				
					<div id="slide3" class="slide">
						<div class="visu" class="slide">
							<img src="../images/slide3.jpg/" alt=""/>
						</div>
						<div class="titre">
							titre3
						</div>
						<div class="description">
							<p>blabla</p>
						</div>
					</div>
						
	<!--<div class="navigation">
	    <span>1</span>
	    <span>2</span>
	    <span>3</span>
	</div>-->
	
				</div><!-- Fin Carrousel -->
			</div><!-- Fin Contenu Principal -->

 var carrousel = {
	nbSlide : 0,
	nbCurrent : 1,
	elemCurrent : null,
	elem : null,
	timer : null,
	
	init : function(elem){
		this.nbSlide = elem.find(".slide").length;
		
		//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");
		
		//Création du timer
		//carrousel.play();
		
		// Hover carrousel
		//elem.mouseover(carrousel.stop);
		//elem.mouseout(carrousel.play);
		
		//Boutons
		//elem.find('#next').click(function(){carrousel.next});
		
	}, 
	
	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.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 = this.nbCurrent+1;
		if(num>this.nbSlide){
			num = 1;
		}
		this.gotoSlide(num);
	},
	
	prev : function(){
		var num = this.nbCurrent-1;
		if(num<1){
			num=this.nbCurrent;
		}
		this.gotoSlide(num);
	},
	
/* 	stop : function(){
		window.clearInterval(carrousel.timer);
	},
	
	play : function(){
		window.clearInterval(carrousel.timer);
		carrousel.timer = window.setInterval("carrousel.next()", 5000);
	} */
	
}

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

/*	Carrousel		*/

#carrousel{
	position:relative;
	margin: 0 auto;
	width:708px;
	height:640px;
	background-image:url("../images/border_slide.png");
	background-repeat:no-repeat;
	overflow:hidden;
}

.navigation{
    position:absolute;
    bottom:38px;
    right:5px;
}

.navigation span{
    background:#000;
    color:#FFF;
    padding:2px 4px;
    cursor:pointer;
    margin:0 1px;
}

.navigation span:hover,.navigation span.active{
    background:#FFF;
    color:#000;
}

.slide{
	position:absolute;
	top:0;
	left:0;
	width:708px;
	height:640px;
}

.visu {
	position:absolute;
	top:14px;
	right:15px;
	width:680px;
	height:448px;
	z-index:-2;
}

.titre{
	position:absolute;
	left:4px;
	top:488px;
	font-family:'HarlowSolidItalic', serif;
	font-size:24px;
	color:#922b2e;
}

.description{
	position:absolute;
	left:4px;
	top:518px;
	font-family:calibri, sans-serif;
	font-size:14px;
	color:#4d4d4d;
}

/*	Fleches navigation		*/

#prev{
	position:absolute;
	right:795px;
	top:342px;
	z-index:12;
	cursor:pointer;
}

#prev a{

}

#next{
	position:absolute;
	right:101px;
	top:342px;
	z-index:12;
	cursor:pointer;
}

P.S : Je ne sait pas s'il faut intégrer les fleches dans le html ou dans le js ?

Merci d'avance

Salut,

Tu peux jeter un oeil de ce coté-ci si tu préfères...

http://sorgalla.com/projects/jcarousel/#Examples

Y a quelques exemples détaillés.

Je l'utilise avec succès dans plusieurs réalisations.

Bon courage !