plugin easyslider. Comment puis-je réaliser deux diaporamas ? [Résolu]

[Shivas]

Bonjour,

Comment puis-je faire pour utiliser easySlider sur deux diaporamas créer sur la même page ?

Code actuel

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>

1er diapo

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script language="JavaScript">
   $(document).ready(function(){ 
	$("#slider").easySlider({
		auto:		true,
		continuous: true,
		prevText: 'Precedent',
		nextText:'Suivant'
		/*speed:800,
 
		orientation: 'horizontal'*/
	});
});
</script>
 
<div id="slider">
   <ul>
       <li></li>
    </ul>
</div>

2eme diapo

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script language="JavaScript">
   $(document).ready(function(){ 
	$("#slider_mieux_notes").easySlider({
		auto:		true,
		continuous: true,
		prevText: 'Precedent',
		nextText:'Suivant'
 
	});
});
</script>
 
<div id="slider_mieux_notes">
   <ul>
       <li></li>
    </ul>
</div>

Actuellement lorsque que je clic sur suivant sur mon 1er diapo ça me fait défiler les images du deux diaporamas.
Merci pour vos réponses.

[SpaceFrog]

Code :

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
 
<script language="JavaScript">
   $(document).ready(function(){ 
	$("#slider_mieux_notes_a, ").easySlider({
		auto:		true,
		continuous: true,
		prevText: 'Precedent',
		nextText:'Suivant'
 
	});
	$("#slider_mieux_notes_b, ").easySlider({
		auto:		true,
		continuous: true,
		prevText: 'Precedent',
		nextText:'Suivant'
 
	});
 
 
});
 
</script>
 
<div id="slider_mieux_notes_a">
   <ul>
       <li></li>
    </ul>
</div>
<div id="slider_mieux_notes_b">
   <ul>
       <li></li>
    </ul>
</div>

??

[Shivas]

A quoi correspond les ??

[SpaceFrog]

a des point d'interrogation ...
an gros la traduction en serait :

est ce que ceci te convient ?

[Shivas]

ok je n'avais pas compris.
J'ai le même comportement avec ton changement

[Shivas]

Une idée ?

[scourjean]

Il suffit de jeter un œil au code du plugin pour s'apercevoir qu'il utilise des Id (qui doivent être unique) sur les liens précédant et suivant.

D'où l'utilité de deux options disponibles : prevId et nextId

[Shivas]

Oui en effet, j'ai déjà essayé de faire la modification et j'ai le même résultat. Je vous indique les changements effectués.

J'ai crée un deuxième plugin intitule easySlider1 ou j'ai modifié les variables prevText et nextText par prevText1 et nextText1. J'ai également fait la modification dans les fonctions.

Code :

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
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>
<script type="text/javascript" src="js/easySlider1.js"></script>
 
 
 
<script language="JavaScript">
$(document).ready(function(){ 
 
	$("#slider_mieux_notes_a, ").easySlider({
 
		auto:		true,
		continuous: true,
		prevText: 'Precedent',
		nextText:'Suivant'
 
 
	});
 
 
	$("#slider_mieux_notes_b, ").easySlider1({
 
	auto:true,
	continuous: true,
 
	prevText1: '<img src=images/fleches/flecheg_04.png border=0>',
	nextText1:'<img src=images/fleches/flecheg_02.png border=0>'
 
	});
});

Merci

[scourjean]

T'as essayé :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$("#slider_mieux_notes_a, ").easySlider({
 
		auto:		true,
		continuous: true,
prevId: 'prev1',
nextId: 'next1',
		prevText: 'Precedent',
		nextText:'Suivant'
 
 
	});
 
 
	$("#slider_mieux_notes_b, ").easySlider1({
 
	auto:true,
	continuous: true,
prevId: 'prev2',
nextId: 'next2',
	prevText1: '<img src=images/fleches/flecheg_04.png border=0>',
	nextText1:'<img src=images/fleches/flecheg_02.png border=0>'
 
	});

[Shivas]

Merci beaucoup pour ton aide, ça fonctionne