Bonjour.

J'ai réalisé un carrousel à l'aide du tuto.

J'ai gardé la troisième méthode pour l'instant, mais j'ai trois petits problèmes :

  • Lorsque j'arrive sur ma page, le carrousel ne défile pas automatiquement toutes les 5 secondes, je dois d'abord en choisir un autre manuellement pour que le défilement débute.
  • Le défilement ne s'interrompt pas lorsque je passe la souris dessus.
  • Lorsque j'arrive sur ma page, je sélectionne le 2e carrousel, le défilement reprend/commence au premier au lieu de passer par le trois, mais il y passe ensuite normalement.

Mon code :
[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="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");
},

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 < 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.elemCurrent.find(".visu").fadeOut();
    this.elem.find("#slide"+num).show();
    this.elem.find("#slide"+num+" .visu").hide().fadeIn();

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

    this.elemCurrent.find(".visu .title").animate({"bottom": - titleHeight}, 500);
    this.elem.find("#slide"+num+" .title").css("bottom", - titleHeight).animate({"bottom": 0}, 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);

    // On créé le timer
    carrousel.play();

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

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()", 1000);
},

}

$(function() {
carrousel.init($('#carrousel'));
});
[/code]

Firebug ne m'indique aucune erreur, mais Komodo Edit me souligne la ligne 65 en vert... Après, je ne sais pas ce que ça veut dire.

Quelqu'un pourrait-il m'aider ? Merci d'avance !

Urefeu

Aucune réponse