Bonjour,
J'ai réalisé le tuto sur la carrousel , mais il y a un probleme que je n'arrive pas à corriger , je ne l'ai pas vu dans les commentaires ou alors j'ai mal compris ...
Le probleme est le suivant , mon carousel est composé de 3 images , à le fin de la première "boucle" il reviens à l'image 1 mais mon bandeau contenant mon titre disparait toujours à partir de la deuxieme boucle , j'ai pourtant appliqué les corrections à mon code donné dans les commentaires du tuto ...
Merci de bien vouloir jeter un oeil afin de me dire ce qui en va pas , j'ai pourtant vérifié plusieurs fois mon code attentivement ...

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

//On créer le 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.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.fadeOut();
this.elem.find("#slide"+num).show();
this.elem.find("#slide"+num).hide().fadeIn();

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

this.elemCurrent.find(".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);
},

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);
carrousel.timer = window.setInterval("carrousel.next()",4000);
}

}

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

2 réponses


PhiSyX
Réponse acceptée

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

Il faut mettre un espace avant .title :)

juju.92
Auteur

Génial ! Merci infiniment PhiSyX c'est vraiment cool d'avoir répondu ;)