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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel</title>
<style type="text/css">
/* Pour le plugin carousel */
div.carousel{
margin:12px;
border:0;
}
div.carousel div{
margin:0;
padding:0;
border:0;
}
div.carousel div.carousel-wrap{
width:200px;
float:left;
margin:0 15px 15px;
border:1px solid #d3d3d3;
background:#f4f4f4;
}
div.carousel ul{
margin:0;
padding:0;
}
div.carousel ul li{
display:inline;
float:left;
padding:20px 0;
width:200px;
text-align:center;
}
div.carousel span.carousel-control{
display:inline;
float:left;
margin:15px 0 0;
padding:5px 10px;
font-weight:bold;
font-size:11px;
cursor:pointer;
background:#ddd;
}
div.carousel span.disabled{
color:#ddd;
cursor:default;
background:#f4f4f4;
}
/* Pour la construction de la page web */
div#conteneur {
margin:6px auto;
width:800px;
border:1px solid blue;
padding:12px;
}
div#car1 {
clear:both;
}
div#car2 {
clear:both;
}
div#car3 {
clear:both;
}
div#page {
clear:both;
width:600px;
height:400px;
border:1px solid red;
margin:12px;
padding:6px;
}
/* Pour cacher les boutons du troisième exemple */
div#car3 span {
display:none;
}
</style>
<script type="text/javascript" src="../scripts/jquery.js"></script>
<script type="text/javascript" src="../scripts/jquery.carousel.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#car1").carousel({
direction: "vertical"
});
$("#car2").carousel();
$("#car3").carousel({
loop: true,
autoSlide: true,
autoSlideInterval: 800
});
});
</script>
</head>
<body>
<div id="conteneur">
<p style="clear:both;">Caroussel vertical</p>
<div id="car1" class="carousel">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<p style="clear:both;">Caroussel horizontal</p>
<div id="car2" class="carousel">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<p style="clear:both;">Caroussel automatique sans boutons</p>
<div id="car3" class="carousel">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<div id="page">
<p>
Le contenu du site web.
</p>
</div>
<!--
Utilisation
Il est possible de passer des options à la méthode jquery.carousel, sous la forme d'un tableau associatif :
direction permet de définir la direction du carousel (horizontal par défaut)
loop, défini sur true, permet de définir une boucle au carousel (false par défaut)
dispItems permet de définir le nombre d'éléments qu'on veut afficher par pas (1 par défaut)
pagination, défini sur true, permet d'afficher une pagination du carousel. (false par défaut)
paginationPosition (dépend de pagination) permet de définir la position de la pagination par rapport au conteneur général du slide. (inside par défaut)
nextBtn permet de définir le html voulu pour le rendu du bouton next. ("next" dans un span par défaut)
prevBtn permet de définir le html voulu pour le rendu du bouton previous. ("previous" dans un span par défaut)
btnsPosition permet de définir la position des boutons par rapport au conteneur général du slide. (inside par défaut)
autoSlide, défini sur true, permet d'executer un click automatique par intervalle sur le bouton next. (false par défaut)
autoSlideInterval (dépend de autoSlide) permet de définir le délai entre chaque click de l'option autoSlide (3000 par défaut)
delayAutoSlide (dépend de autoSlide) permet de définir un contretemps entre les délais de deux carousels cohéxistants (0 par défaut)
combinedClasses (dépend de autoSlide), défini sur true, permet d'emuler les classes multiples sur IE6 (false par défaut)
effect permet de définir l'animation que va utiliser jQuery pour la transition d'un item du carousel à l'autre (slide par défaut, effets intégrés à jQuery - voir documentation).
slideEasing (si effect="slide"), permet des effets d'easing sur l'animation slide (swing par défaut, voir la documentation du plugin easing.js à combiner si besoin)
slideSpeed (si effect="slide") permet de définir la vitesse de l'animation si c'est en slide. (normal par défaut)
En fait le plugin transforme la division ayant la class carousel, ci dessous :
<div class="carousel">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
en ceci :
<div class="carousel js">
<span class="carousel-control previous carousel-previous disabled">Previous</span>
<div style="overflow: hidden; position: relative; height: 60px;" class="carousel-wrap">
<ul style="position: absolute; top: 0px; width: 200px; height: 360px;">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
<span class="carousel-control next carousel-next">Next</span>
</div>
nous avons donc besoin d'une feuille de style appropriée, ce qui est très mal documenté dans le plugin.
-->
</div>
</body>
</html> |
