Bonjour tout le monde,

J'essaie d'utiliser ce plugin mootools :

http://zendold.lojcomm.com.br/icarousel/example6.asp

Mais j'arrive à ce résulat :

http://164.15.112.38/Cel/Carrousel/index.php

Il me semble pourtant avoir suivi chaque étape :

Dans le head :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<script type="text/javascript" src="mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="iCarousel-full.js"></script>
<link rel="stylesheet" media="screen" href="style.css" />
 
</head>
Le 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
<h3>VI. Horizontal images slider</h3>
<div id="example_6">
	<ul id="example_6_content">
		<li class="example_6_item"><a href="#"><img src="images/ex6_1.jpg" alt="slide 1" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_2.jpg" alt="slide 2" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_3.jpg" alt="slide 3" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_4.jpg" alt="slide 4" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_5.jpg" alt="slide 5" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_6.jpg" alt="slide 6" /></a></li>
		<li class="example_6_item"><a href="#"><img src="images/ex6_7.jpg" alt="slide 7" /></a></li>
	</ul>
	<div id="example_6_frame">
		<ul>
			<li><a href="#"><img id="thumb0" src="images/ex6_1t.jpg" alt="thumbnail 1" /></a></li>
			<li><a href="#"><img id="thumb1" src="images/ex6_2t.jpg" alt="thumbnail 2" /></a></li>
			<li><a href="#"><img id="thumb2" src="images/ex6_3t.jpg" alt="thumbnail 3" /></a></li>
			<li><a href="#"><img id="thumb3" src="images/ex6_4t.jpg" alt="thumbnail 4" /></a></li>
			<li><a href="#"><img id="thumb4" src="images/ex6_5t.jpg" alt="thumbnail 5" /></a></li>
			<li><a href="#"><img id="thumb5" src="images/ex6_6t.jpg" alt="thumbnail 6" /></a></li>
			<li><a href="#"><img id="thumb6" src="images/ex6_7t.jpg" alt="thumbnail 7" /></a></li>
		</ul>
	</div>
</div>
J'ai mis ce script dans le body, l'erreur est peut être ici ? :

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
 
<script>
window.addEvent("domready", function() {
	var ex6Carousel = new iCarousel("example_6_content", {
		idPrevious: "example_6_previous",
		idNext: "example_6_next",
		idToggle: "undefined",
		item: {
			klass: "example_6_item",
			size: 640
		},
		animation: {
			type: "scroll",
			duration: 1000,
			amount: 1
		}
	});
 
	$("thumb0").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(0)});
	$("thumb1").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(1)});
	$("thumb2").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(2)});
	$("thumb3").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(3)});
	$("thumb4").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(4)});
	$("thumb5").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(5)});
	$("thumb6").addEvent("click", function(event){new Event(event).stop();ex6Carousel.goTo(6)});
});
</script>
Mon CSS est présent :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
 
/* example_6 css */
#example_6 {
	position: relative; /* important */
	overflow: hidden; /* important */
	width: 640px; /* important */
	height: 540px; /* important */
	margin: 0;
	background: #fff;
}
 
#example_6_content {
	position: absolute;
	top: 0;
	margin-left: 0;
}
 
#example_6_content
#example_6_content li {
	list-style: none;
	margin: 0;
	padding: 0;
}
	#example_6_content {
		width: 13440px;
	}
	#container_bd #example_6 ul li {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		border: none;
		background-color: #fff;
	}
 
#container_bd #example_6 ul li img {
	display: block;
}
 
#example_6_frame {
	position: relative;
	margin: 485px 131px 0 131px;
}
#container_bd #example_6_frame ul li {
	margin: 0 2px;
}
#container_bd #example_6_frame ul li img{
	border: 1px solid #9cf;
	padding: 2px;
}
	#container_bd #example_6_frame ul li img:hover {border: 1px solid #369;}
Mais je n'obtiens pas le bon résultat.

Voyez-vous ce qui cloche ?

Merci d'avance.

beegees