Carrousel jQuery ne fonctionne pas
Bonjour,
je suis actuellement en train de réaliser un carrousel, mais après plusieurs essais je reste toujours bloquée au même endroit : je n'ai que le numéro 1 qui s'affiche dans ma pagination alors que j'ai 4 images.
Quand j'ouvre firebug, il ne voit qu'un span dans mon code, alors que j'en ai 4 : http://www.casimages.com/img.php?i=1...4736208467.png
Voilà 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
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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Chic et Broc | Accueil</title>
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="carou.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="carou.js"></script>
</head>
<body>
<div id="titre"><a href="index.html"><img src="img/interface/titre.png" alt="Chicetbroc"></a></div>
<div id="filets"><img src="img/interface/filets.png" alt="filets" ></div>
<nav>
<ul>
<li><a href="quisommesnous.html">Qui sommes-nous ?</a></li>
<li><a href="galerie.html">Galerie photo</a></li>
<li><a href="contact.html">Contact et infos pratiques</a></li>
</ul>
</nav>
<div id="conteneur">
<div id="carrousel">
<div id="slide1" class="slide">
<div class="visu"> <img src="img/carou/slide1.jpg"/> </div>
<div class="title"> Globe en cristal </div>
</div>
<div id="slide2" class="slide">
<div class="visu"> <img src="img/carou/slide2.jpg"/> </div>
<div class="title"> Porte-bougie en cristal </div>
</div>
<div id="slide3" class="slide">
<div class="visu"> <img src="img/carou/slide3.jpg"/> </div>
<div class="title"> Tortue en cristal </div>
</div>
<div id="slide4" class="slide">
<div class="visu"> <img src="img/carou/slide4.jpg"/> </div>
<div class="title"> Fleur en cristal </div>
</div>
<!--
<div class="navigation">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
-->
</div>
</div>
</body>
</html> |
et le code de carou.css :
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
|
var carrousel = {
nbSlide : 0,
nbCurrent : 1,
elemCurrent : null,
elem : null,
init : function(elem){
this.nbSlide = elem.find(".slide").length;
//pagination
elem.append('<div class="navigation"></div>');
for(var i=1;i<=this.nbSlide;i++){
elem.find(".navigation").append("<span>"+i+"</span>");
}
}
}
$(function(){
carrousel.init($("#carrousel"));
}); |
Voilà si quelqu'un pouvait m'aider parce que je ne vois vraiment pas où est le problème, il me semble avoir bien tout suivi, et j'ai recommencé plusieurs fois en plus, alors voilà, merci :)
