Problème avec Carrousel

Bonjour,

Voilà j'ai suivi le tuto sur le carrousel de Grafikart (très bien expliqué, comme toujours).
Tout fonctionne bien lors de la 1ere lecture. Arrivé au dernier slide le carousel ne revient pas à la 1ere image, seul la navigation continu les boucles sans afficher les slides correspondant.

Vous pouvez voir le script en fonction sur mon site avec le bug

ci-dessous les codes.

Merci pour votre aide.

Le HTML

<!--Header-->
<div id="header"> 
    <!--Carrousel-->
    <div id="carrousel">
        <div id="slide1" class="slide">
            <div class="image">
                <img src="../design/header carrousel/Famille.png"/> 
            </div>        
        </div> 
        <div id="slide2" class="slide">
            <div class="image">
                <img src="../design/header carrousel/Terroir.png" /> 
            </div>        
        </div> 
        <div id="slide3" class="slide">
            <div class="image">
                <img src="../design/header carrousel/Histoire.png" /> 
            </div>        
        </div> 
          <div id="slide4" class="slide">
            <div class="image">
                <img src="../design/header carrousel/Passion.png"/> 
            </div>        
        </div>                 
    </div>

    <!--Choix des Langues-->
        <ul>
        <li class="gb"><a href="../gb/accueil.html"> <img src="../images/drapeaux/uk.png" width="35" height="20"/></a> </li>
        <li class="cn"><a href="../cn/accueil.html"> <img src="../images/drapeaux/Chine.png" width="35" height="20"/></a> </li> 
         <li class="fr"><a href="../fr/accueil.html"> <img src="../images/drapeaux/France.png" width="35" height="20"/></a> </li>
         </ul>
</div>

LE fichier JS

var carrousel = { 
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,
    init : function(elem){
        this.nbSlide = elem.find(".slide").length;

        //navigation
        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");

        //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.elemCurrent){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 = 0;    
        }
        this.gotoSlide(num);
    },
    Stop : function(){
        window.clearInterval(carrousel.timer);  
    },
    play : function(){
        this.timer = window.setInterval("carrousel.next()",5000);       
    }
}
$(function(){
    carrousel.init($("#carrousel"));

});

LE CSS

/*Choix des Langues*/
#header ul {
    float:left;
    list-style:none;
    margin-top:150px;
}
#header ul li.gb {
    margin-left:165px;

}
#header ul li.cn{
    margin-left:150px;
}
#header ul li.fr{
    margin-left:125px;
}
/* CARROUSEL*/
#carrousel {
    float:right;
    width:600px;
    height:200px;
    margin:25px 0 ;
    background-color:#000000;
    position:relative;
    overflow:hidden;
    z-index:1;
}
.slide {
    position:absolute;
    top:0;
    left:0;
    width:600px;
    height:200px;
}
.navigation {
    position: absolute;
    bottom:0px;
    right:0px;
}
.navigation span{
    color:#FFFFFF;
    background:#000000;
    cursor:pointer;
}
.navigation span:hover,.navigation span.active{
    color:#000000;
    background:#FFFFFF;
}