Bonjour,

J'ai réalisé, à l'aide du tuto trouvé sur GraphikArt.fr un carrousel. Il fonctionne bien, rien à dire dessus.
Quand le carrousel défile pour la première fois, aucun soucis On peut cliquer sur les liens html si il y en a.
Si on revient sur un slide qui est déjà passé, les html est "bloqué", et on ne peut pas cliquer sur les liens. Très embêtant comme problème.

Pour tester vous pouvez aller ici


J'ai remarqué quelque chose aussi, sous IE 8 le carrousel fonctionne bien


Pour le code JS :

var car = {

nbSlide : 0,
nbCurrent: 1,
elemCurrent : null,
elem : null,
timer : null,

init : function(elem){
this.nbSlide = elem.find(".slide").length;

//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(){car.gotoSlide($(this).text());})

//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");

//Timer
car.play();

//Stop quand la souris passe dessus
elem.mouseover(car.stop);
elem.mouseout(car.play);
},

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


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(".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(car.timer);
},

play : function(){
window.clearInterval(this.timer);
this.timer = window.setInterval("car.next()",5000);
}


}

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

Si vous voulez d'autres indications, n'hésitez pas
Merci d'avance

Plutôt que de cacher les divs avec la class 'visu'... cache directement ceux avec la classe 'slide'.
Ca devrait résoudre ton problème.

Merci pour ton aide
ça à l'air de fonctionner, mais du coup, mes slides ne disparaissent pas. ( j'y connais malheureusement, pas grand chose en JS )

J'ai modifier cette ligne :

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

en ceci :

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

Au cas ou, je mes la structure HTML d'un slide:

<div id="slide1" class="slide">
    <div class="visu">
	<p>par exemple <a href="http://chezwoam.fr/car/">cheoam.fr</a></p>
    </div>

    <div class="title">
        Un titre
    </div>
</div>

Aperçu ici


Merci !

A la ligne 41 du JS, tu as ça :

this.elem.find("#slide"+num+" .slide").hide().fadeIn();

Essaye comme ça pour voir :

this.elem.find("#slide"+num+").hide().fadeIn();

Merci pour tes réponses

J'ai remplacé la ligne 41 par :

this.elem.find("#slide"+num).hide().fadeIn();

Et les slides ne disparaissent pas

J'ai donc ça :

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

Merci pour ton aide

Pour voir la nouvelle version => ici

Et à la ligne 39 :

this.elemCurrent.find(" .slide").fadeOut();

à remplacer par

this.elemCurrent.fadeOut();

En espérant que ça fonctionne...

Yeah Yeah !!
ça à l'air de fonctionner parfaitement !

Merci !

Si c'est effectivement le cas, je passe le sujet en résolu!

Merci Golmote

bonjour

et pour que le carrousel stop quand en passe la souris au dessus il faut remplacer this.timer dans les lignes 79 et 80 par car.timer
comme il été mentionne dans les commentaires du tuto carrousel javascript