Bonjour tout le monde :) ,
j'ai suivi le tuto sur le carrousel, et ben je ne comprend pas du tout ce qu'il me fait.
<u><strong>Explication</strong></u> : Sur mon carrousel, 5 seconde a attendre pour l'animation... Voici une vidéo d'un des résultat : Vidéo
Pourquoi un des résultat, c'est en fait, fort simple, 1 fois sur 3 a peu près il bug... Il faut que j'actualise pour que le bug disparaisse.
Donc je me demande ou peux bien etre la faute ^^
Voici mon code :
var carroussel = {
nbSlide : 0,
nbCurrent :1,
elemCurrent: null,
elem : null,
timer : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
//Création de 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(){
carroussel.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(".navigation span:first").addClass("active");
//On appel le timer
carroussel.play();
//Stop le carroussel quand on passe dessus
elem.mouseover(carroussel.stop);
elem.mouseout(carroussel.play);
},
gotoSlide : function(num){
if(num == this.nbCurrent){
return false;
}
/*
*Annimation en fadeIn/fadeOut
*
this.elemCurrent.fadeOut();
this.elem.find("#slide"+num).fadeIn();*/
//Annimation 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 --;
if(num < 1){
num = this.nbSlide;
}
this.gotoSlide(num);
},
stop : function(){
window.clearInterval(carroussel.timer);
},
play : function(){
window.clearInterval(carroussel.timer);
//On cré le timer
this.timer = window.setInterval("carroussel.next()", 5000);
}
}
$(function(){
carroussel.init($("#carroussel"));
});
Merci d'avance pour votre aide.
Cordialement Elo.
Bonjour, désolé de faire remonter le sujet, mais je rencontre le même problème et j'avait déjà mis carrousel.timer.
En fait le bug apparaît principalement quand je navigue sur d'autre onglet de mon navigateur.
Exemple: j'ouvre mon site avec le carrousel, puis je vais dans une autre onglet (sur grafikart par exemple) au bout d'un moment je retourne sur mon site. Le carrousel bug et fait des allez retour de droite a gauche.
J'ai un peut chercher mais je vois pas ce qui pourrait provoquer ce bug. Peut être la variable sens ! je testerais demain il est tard/tôt.
Si quelqu'un a la solution, merci d'avance.
Là je n'ai plus du tout le script en tête mais c'est un problème de timer qui se relance en plusieurs fois. A toi de mettre des alerts ou console.log pour trouver à quel endroit le timer est dupliqué sans raison. (Sinon remplace les timer par des timeOut qui relanceraient un nouveau timeout à chaque fois, pour être sur de ne pas avoir plusieurs chrono en même temps)