Discussion :

[Invité]

Bonsoir à tous,

Je dois ajouter un slider sur une page utilisant jQuery, mon choix s'est porté sur anythingSlider (bon ou mauvais choix, peu importe). J'ai réussi à l'intégrer correctement dans ma page.
Ce slide doit être récursif, dans le sens où, lorsqu'on arrive à la dernière li, on doit retourner à la première.

Sauf que je rencontre un problème sous Chrome ( / Chromium), Opera et Safari : la première slide qui apparaît est tout simplement vide. Il affiche en fait une li, générée automatiquement, qui apparemment permet de faire fonctionner la récursivité.

Et, ce qui est encore plus étrange, c'est que le problème semble apparaître aléatoirement : tout se passe bien quelques fois, puis le bug réapparaît, etc...

Voici le code HTML et le code JS :

HMTL, après génération du code automatique de anythingSlider :

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
 
<div id="main_reviews">
	<div class="anythingSlider anythingSlider-default activeSlider" style="width: 555px; height: 220px; ">
		<span class="arrow back"><a href="#"></a></span>
		<span class="arrow forward"><a href="#"></a></span>
		<div class="anythingWindow">
			<ul id="list_reviews" class="anythingBase" style="width: 3885px; ">
				<li class="review cloned panel" style="width: 555px; height: 220px; "></li>
				<li class="review panel" style="width: 555px; height: 220px; ">
					<div class="review_column1">...</div>
					<div class="review_column2">...</div>
					<div class="review_column3">...</div>
				</li>
				<li class="review panel activePage" style="width: 555px; height: 220px; ">
					<div class="review_column1">...</div>
					<div class="review_column2">...</div>
					<div class="review_column3">...</div>
				</li>
				<li class="review panel" style="width: 555px; height: 220px; ">
					<div class="review_column1">...</div>
					<div class="review_column2">...</div>
					<div class="review_column3">...</div>
				</li>
				<li class="review panel" style="width: 555px; height: 220px; ">
					<div class="review_column1">...</div>
					<div class="review_column2">...</div>
					<div class="review_column3">...</div>
				</li>
				<li class="review panel" style="width: 555px; height: 220px; ">
					<div class="review_column1">...</div>
					<div class="review_column2">...</div>
					<div class="review_column3">...</div>
				</li>
				<li class="review cloned panel" style="width: 555px; height: 220px; "></li>
			</ul>
		</div>
	</div>
</div>

Et voici le code JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$('ul#list_reviews').anythingSlider({
	width: "555px",
	height: "220px",
	autoPlay: true,
	startPanel: 1,
	forwardText: "", 
	backText: ""
});

En espérant que vous pourrez m'aider.

EDIT : Fait intéressant, ça ne fonctionne que quand le cache est vide. Dès que le navigateur a le site en cache, le bug apparaît.

[Invité]

Désolé pour le double post.

En attendant de résoudre le problème, j'ai placé un correctif qui marche apparemment bien, je vous le transmets, au cas où un autre développeur en ait besoin un de ces 4 :

Il faut placer juste après l'appel classique de anythingSlider, dans le document.ready, la ligne suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('ul#list_reviews').anythingSlider(1);

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
/** Gestion du slider **/
$('ul#list_reviews').anythingSlider({
	width: "605px",
	height: "220px",
	autoPlay: false,
	stopAtEnd: true,
	startPanel: 1,
	forwardText: "", 
	backText: ""
});
$('ul#list_reviews').anythingSlider(1);

Si vous avez tout de même une explication au souci initial, je suis preneur, autant éviter de faire de la bidouille.