Bonjour à tous,
voila j'ai un gros problème j'ai fais ce script pour un carrousel mais il y a un bug que je n'arrive pas à résoudre ! En faite quand la dernière image est slider elle l'est 2 fois donc visuellement ça fait pas très beau !! Et quand on se trouve sur cette dernière en elemCurrent et que l'on click pour aller sur un autre slide on vois le même phénomène l'image et slider 2 fois ! Mais cela n'a lieu uniquement que pour la dernière image et je comprend absolument pas pourquoi !!!
Merki d'avance !
<script type="text/javascript">
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
timer : null,
num : 1,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
//creer la pagination
elem.find("menu_carrousel").append('<ul></ul>');
for(var i=1;i<=this.nbSlide;i++){
titre = elem.find("contenu div.slide:nth-child("+i+") titre").text();
elem.find("menu_carrousel ul").append("<li id='"+i+"'>"+titre+"</li>");
}
width = 920 / this.nbSlide - 31;
elem.find("menu_carrousel ul li").css("width",width);
elem.find("menu_carrousel ul li:last").css("border","none").css("width", width + 1);
//initialisation du carrousel
elem.find("menu_carrousel ul li").click(function(){ carrousel.gotoSlide($(this).attr("id")); });
this.elem = elem;
elem.find("contenu div.slide").hide();
elem.find("contenu div.slide:first").show();
this.elemCurrent = elem.find("contenu div.slide:first");
this.elem.find("menu_carrousel ul li:first").addClass("active");
//installation de la fleche
carrousel.fleche("1", elem);
// On cré 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; }
if(num<this.nbCurrent){ hide = "up"; show = "down";} else { hide = "down"; show = "up" }
this.elemCurrent.hide("slide", { direction: hide }, 1000);
this.elem.find("div.slide#"+num).show("slide", { direction: show }, 1000);
this.elem.find("menu_carrousel ul li").removeClass("active");
this.elem.find("menu_carrousel ul li:eq("+(num-1)+")").addClass("active");
this.nbCurrent = num;
this.elemCurrent = this.elem.find("div.slide#"+num);
carrousel.fleche(num, this.elem);
},
fleche : function(num, elem) {
fleche = elem.find("fleche");
width = 920 / this.nbSlide;
left = num * width - (width/2) - 10;
fleche.css("left",left);
},
next : function(){
var num = this.nbCurrent+1;
if(num >this.nbSlide){
num = 1;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carrousel.timer);
},
play : function(){
window.clearInterval(carrousel.timer);
carrousel.timer = window.setInterval("carrousel.next()",5000);
}
}
</script>
se qui est vraiment extrêmement étrange c'est que ça le fait exclusivement sur safari !