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

**ballantine's** · 17/06/2010, 14h04

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 :

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
 
<!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 :

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
 
#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 :

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

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

Merci de votre aide

**danielhagnoul** · 19/06/2010, 00h10

Bonsoir.

Code :

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

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

Code :

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

1
2
3
4
5
6
7
8
<form>
	<div id="slider">
		<ul>
			<li><img src="presentationjquery.jpg"></li>
			<li><img src="222.jpg"></li>
		</ul>
	</div> 
</form>

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager