Bug lors du démarrage d'une fonction

Bonjour,

je suis en train de créer un carrousel pour mon site web qui est en construction mais je rencontre un problème.
Je souhaiterais que quand je passe le curseur de la souris sur ma div carrousel que les éléments HTML ne défile plus et lorsque le curseur de la souris sort de la div la relecture reprenne (Suis - je clair ?).
Seulement je rencontre un problème lorsque la relecture reprend, j'ai l'impression que le code s'emmêle et fait n'importe quoi.

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="pagination"></div>');
for(var i=1; i<=this.nbSlide; i=i+1){
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();
this.elemCurrent = elem.find(".slide:first");
this.elemCurrent.show();
this.elem.find(".navigation span:first").addClass("active");

// Créer le timer
carrousel.play();

// Stop quand on passe dessus
elem.mouseover(carrousel.stop);
elem.mouseout(carrousel.play);
},

gotoSlide : function(num){
if(this.nbCurrent == num){ return false;}
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();
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.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},

play : function(){

this.timer = window.setInterval("carrousel.next()",5000);
},
}

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

});

Et mon code HTML:

<div id="carrousel">
<div id="slide1" class="slide">
<article>
<h3>TITRE</h3>
<aside>- DATE -</aside>
<p>TEXTE</p>
</article>
</div>
<div id="slide2" class="slide">
<article>
<h3>TITRE</h3>
<aside>- DATE -</aside>
<p>TEXTE</p>
</article>
</div>
<div id="slide3" class="slide">
<article>
<h3>TITRE</h3>
<aside>- DATE -</aside>
<p>TEXTE</p>
</article>
</div>
</div>

Voyez-vous quelque chose d'anormal ?