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 :
Le code HTML :
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>
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 <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>
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 <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>
Mais je n'obtiens pas le bon résultat.
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;}
Voyez-vous ce qui cloche ?
Merci d'avance.
beegees
Partager