Problème carrousel javascript avec Jquery du tuto

Bonjour à tous,

Je suis tout nouveau ici j'ai découvert donc le tuto pour créer un carrousel en javascript avec Jquery que je trouve vraiment super étant vraiment novice dans le domaine du javascript. Enfin bref j'ai donc suivie la vidéo du début à la fin cependant j'ai un problème au niveau de l'affichage de la page html, je m'explique le carrousel s'affiche correctement les trois slides le timer s'exécute correctement toutes les 5 secondes en boucle jusque la tout va bien mais le problème est que des l'instant que je veu cliquer sur une des slides par ex de passer de la 1 à la 3 le carrousel bug et toutes les 0.5 sec environ les slides changent et se mélange. Je sait si je suis assez clair dans mon explication mais du coup je sait pas du tout quoi faire si c'est une erreur dans le code js ou pas j'ai essayer de chercher sur le forum ou dans les commentaires mais il n'y a pas l'air d'avoir une réponse en rapport à ca.
Je vous remercie par avance de vos réponses en espérant trouver la solution à mon problème.

Voici mon code js:

/*
    CARROUSSEL JS

    */

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

        // Création du timer
        carrousel.play();
        // Arret du carrousel par survol de la souris
        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.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(){
        window.clearInterval(carrousel.timer);
        this.timer = window.setInterval("carrousel.next()",5000);
    }

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