plug-in easySlider, les images ne défilent pas

Bonjour,

je débute avec JQuery, et j'ai repris un des tuto de développez.com pour utiliser cette bibiliothèque.

Mon soucis, j'essaye de faire un slider d'images, et les images au lieu de défiler s'affichent les unes à coté des autres et les boutons précédents et suivants ne sont pas activés. Mais je n'arrive pas à sortir de ce petit problème....

Voici mon code HTML :

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
 
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www/w3.org/1999/xhtml1" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Menu anime fluide avec JQuery</title>
<link type="text/css" rel="stylesheet" href="contact_form.css"/>
<script src="js/js/jquery.js" type="text/javascript"></script>
<script src="js/js/easySlider1.5.js" type="text/javascript"></script>
<script src="slider.js" type="text/javascript"></script>
</head>
<body>
<form>
<div id="slider">
	<ul>
		<li><img src="presentationjquery.jpg"></li>
		<li><img src="222.jpg"></li>
	</ul>
</div> 
	<span id="prevBtn"><a href="javascript:void(0);">Precedent</a></span>
	<span id="nextBtn"><a href="javascript:void(0);">Suivant</a></span>
</form>
</body>
</html>

Voici mon CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#slider ul, #slider li
{
margin:0;
padding:0;
list-style:none;
}
 
#slider,#slider li
{
width:500px;
height:200px;
overflow:hidden;
}
 
span#prevBtn{}
 
span#nextBtn{}

et voici mon code .js :

Code:

1
2
3
4
5
6
 
$(document).ready( function()
{
$("#slider").easyslider({prevText: 'Précédent',nextText: 'Suivant',orientation: 'vertical'}
);
});

Merci de votre aide