Bonjour,

J' ai créé un Slideshow simple avec bouton précédent et suivant, mais je n' arrive pas à créer un bouton précédent .

Voici le code html:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="slideshow">
  <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 <div class="slide">
     <div class="mini"></div>
     <div class="mini"></div>
     <div class="mini"></div>
  </div>
 
</div>
<input type="submit" value="précédent" id="prev" />
<input type="submit" value="suivant" id="next" />
Le css :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
.slide {
float:left;
}
.visible {
display:block;
}
.hidden {
display:hidden;
}
Le code Jquery

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
$("#slideshow .slide:first-child;").removeClass("hidden");
$("#slideshow .slide:first-child;").addClass("visible");
 
var long = $(".slide").length;
var compt = 1;
 
$("#next").click(function() {
 
//Si le compteur est inférieur aux nombres d' éléments div.slide
if (compt<long) {
//On détermine le div courant, celui qui a une classe .visible
current=$("#minis .slide.visible");
 
//On détermine le prochain div.slide
next=current.next();
 
//On cache le div.slide courant
current.addClass("hidden");
current.removeClass("visible");
 
//On montre le suivant
next.addClass("visible");
next.removeClass("hidden");
 
//On ajoute une classe .pointeur au slide suivant
next.addClass("pointeur");
 
//On ajoute une classe prev au courant
current.addClass("prev");
current.removeClass("pointeur");
 
//On incrémente le compteur
compt++;
}	
});
 
 
 
$("#prev").click(function() {
//Si le compteur est supérieur à 1
if (compt>1) {
 
//On détermine le div.slide courant et le précédent grâce aux classes //appliquées avec le bouton suivant
current=$("#slideshow .pointeur");
prev=$("#slideshow .prev:last-child");
 
//On rend le div.slide courant caché, on enlève la classe pointeur 
current.addClass("hidden");
current.removeClass("visible");
current.removeClass("pointeur");
 
//On montre le précédent, et on lui ajoute la classe pointeur, on lui ôte la classe prev
prev.addClass("visible");
prev.removeClass("hidden");
prev.removeClass("prev");
prev.addClass("pointeur");
 
 
//On décrémente le compteur
compt--;
}
 
});
Le bouton suivant marche très bien, par contre je n' arrive pas à faire marcher le précédent.

Le principe est le suivant:

On trouve le dernier div.prev créé avec le bouton suivant ( last-child), et on le rend visible, et on rend le div.pointeur visible. Mais ça ne marche pas, je dois me tromper quelque part. Le résultat est que tout les slides deviennent invisibles.

Avez-vous une solution?