Carroussel js

Pouette
Javascript

Bonjour à tous,

ceci est mon premier message sur ce forum et j'espère réussir à trouver une solution à mon problème.

J'ai suivi le tutoriel vidéo sur le carrousel jquery, jusque là tout va bien.

L'affichage de la page et des images se fait parfaitement bien, en fadeIn/fadeOut ou en slide latéral mais voilà, après un tour ou deux du carrousel ça part à volo.
Je tente de m'expliquer le plus clairement possible : ça part dans tout les sens et je ne comprend pas pourquoi puisque je n'ai pas de message d'erreur (je suis sur Chrome et je n'ai pas essayé sur d'autre navigateur).

Je vous donne le js :

[code]
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++){
        elem.find(".pagination").append("<span>"+i+"</span>");
    }
    elem.find(".pagination span").click(function(){ carrousel.gotoSlide($(this).text()); })

    // initialisation du carroussel
    this.elem=elem;
    elem.find(".slide").hide();
    elem.find(".slide:first").show();
    this.elemCurrent = elem.find(".slide:first");
    this.elem.find(".pagination span:first").addClass("active");

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

    //stop mouse over

    this.elem.mouseover(carrousel.stop);
    this.elem.mouseout(carrousel.play);
},

gotoSlide : function(num){
    if(num==this.nbCurrent){return false;};

    //animation fade in/out
    /* this.elemCurrent.fadeOut();
    this.elem.find("#slide"+num).fadeIn(); */

    //animation 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,},1500);
    this.elemCurrent.animate(cssFin,1500);

    /* this.elemCurrent.find(".visu").fadeOut();
    this.elem.find("#slide"+num).show();
    this.elem.find("#slide"+num+".visu").hide().fadeIn();

    var titleHeight = this.elemCurrent.find(".titre").height();

    this.elemCurrent.find(".titre").animate({"bottom": -titleHeight},500);
    this.elem.find("#slide"+num+".titre").css("bottom", -titleHeight).animate({"bottom":0},500); */

    this.elem.find(".pagination span").removeClass("active");
    this.elem.find(".pagination 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($("#carrousel"));
});
[/code]

J'ai grande confiance en vous pour m'éviter de m'arracher les cheveux plus encore :)

Merci d'avance

Pouette

Aucune réponse