Skip to content
Newer
Older
100644 603 lines (518 sloc) 19.6 KB
d5ec656 @jsor Inital import of rewrite for 0.3
authored
1 jCarousel - Riding carousels with jQuery
2 ========================================
3
4 jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
5
84f9d4e @jsor Change access of methods to use jQuery.sub()
authored
6 Requirements
7 ------------
8
9 jCarousel requires jQuery 1.5.0 or higher.
10
d5ec656 @jsor Inital import of rewrite for 0.3
authored
11 Getting started
12 ---------------
13
14 To use the jCarousel component, include the [jQuery](http://jquery.com) library, the jCarousel source file and a jCarousel skin stylesheet file inside the `<head>` tag of your HTML document:
15
af1ff84 @jsor Test syntax hilighting
authored
16 ```html
17 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
18 <script type="text/javascript" src="/path/to/jquery.jcarousel.min.js"></script>
19 <link rel="stylesheet" type="text/css" href="/path/to/skin.css" />
20 ```
d5ec656 @jsor Inital import of rewrite for 0.3
authored
21
22 jCarousel expects a very basic HTML markup structure inside your HTML document:
23
538e4cc @jsor Separate code example and element illustration
authored
24 <div id="mycarousel" class="jcarousel">
25 <ul>
26 <li>...</li>
27 <li>...</li>
9af7d89 @jsor Minor tweaks
authored
28 </ul>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
29 </div>
30
8cca5b0 @jsor Add missing underscore
authored
31 This document refers to the elements as _root element_, _list element_ and _item element(s)_:
538e4cc @jsor Separate code example and element illustration
authored
32
33 <div id="mycarousel" class="jcarousel"> <------------------| Root element
34 <ul> <--------------------------------| List element |
35 <li>...</li> <---| Item element | |
36 <li>...</li> <---| Item element | |
37 </ul> <-------------------------------| |
38 </div> <---------------------------------------------------|
39
d5ec656 @jsor Inital import of rewrite for 0.3
authored
40 To setup jCarousel, add the following code inside the `<head>` tag of your HTML document:
41
af1ff84 @jsor Test syntax hilighting
authored
42 ```javascript
43 <script type="text/javascript">
44 $(function() {
45 $('#mycarousel').jcarousel({
46 // Configuration goes here
d5ec656 @jsor Inital import of rewrite for 0.3
authored
47 });
af1ff84 @jsor Test syntax hilighting
authored
48 });
49 </script>
50 ```
d5ec656 @jsor Inital import of rewrite for 0.3
authored
51
5b369d1 @jsor Extend skinning section
authored
52 These are the minimal CSS settings for a horizontal carousel:
53
af1ff84 @jsor Test syntax hilighting
authored
54 ```css
55 .jcarousel {
56 position: relative;
57 overflow: hidden;
58 }
59
60 .jcarousel ul {
61 width: 20000em;
62 position: absolute;
63 list-style: none;
64 margin: 0;
65 padding: 0;
66 }
67
68 .jcarousel li {
69 float: left;
70 }
71
72 .jcarousel[dir=rtl] li {
73 float: right;
74 }
75 ```
5b369d1 @jsor Extend skinning section
authored
76
77 Skinning jCarousel
78 ------------------
79
70e8129 @jsor Readme typos and enhancements
authored
80 **Note:** These are only conventions and nothing of it is _required_. You can adjust the class names or the whole handling of the skinning.
5b369d1 @jsor Extend skinning section
authored
81
82 If you want to provide different skins for your carousel, setup with the following markup:
83
84 <div class="jcarousel-skin-name">
85 <div id="mycarousel" class="jcarousel">
86 <ul>
87 <li>...</li>
88 <li>...</li>
89 </ul>
90 </div>
91 </div>
92
70e8129 @jsor Readme typos and enhancements
authored
93 We simply surround the root element with a additional `<div class="jcarousel-skin-name">` to have a skin _namespace_. We can now style within this _namespace_:
5b369d1 @jsor Extend skinning section
authored
94
95 .jcarousel-skin-default .jcarousel {
96 /* ... */
97 }
98
9af7d89 @jsor Minor tweaks
authored
99 .jcarousel-skin-default .jcarousel ul {
5b369d1 @jsor Extend skinning section
authored
100 /* ... */
101 }
102
9af7d89 @jsor Minor tweaks
authored
103 .jcarousel-skin-default .jcarousel li {
5b369d1 @jsor Extend skinning section
authored
104 /* ... */
105 }
106
107 The download package contains some example skin packages. Feel free to build your own skins based on it.
108
109 **Note: Skins will follow!**
110
d5ec656 @jsor Inital import of rewrite for 0.3
authored
111 Configuration
112 -------------
113
547867a @jsor Small fixes in readme
authored
114 jCarousel accepts a list of options to control the behaviour of the carousel. Here is the list of options you may set:
d5ec656 @jsor Inital import of rewrite for 0.3
authored
115
116 <table>
117 <tr>
118 <th>Property</th>
119 <th>Type</th>
120 <th>Default</th>
121 <th>Description</th>
122 </tr>
123 <tr>
98f91cb @jsor Fix formatting
authored
124 <td>list</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
125 <td>string</td>
40cc44a @jsor Add quotes around selector strings for consistency
authored
126 <td>&quot;&gt;ul:eq(0)&quot;</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
127 <td>jQuery selector to select the list inside the root element.</td>
128 </tr>
129 <tr>
98f91cb @jsor Fix formatting
authored
130 <td>items</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
131 <td>string</td>
40cc44a @jsor Add quotes around selector strings for consistency
authored
132 <td>&quot;&gt;li&quot;</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
133 <td>jQuery selector to select the items inside the list element.</td>
134 </tr>
135 <tr>
98f91cb @jsor Fix formatting
authored
136 <td>animation</td>
e14b018 @jsor Allow all options for animation jQuery.animate() accepts (removes the…
authored
137 <td>integer|string|object</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
138 <td>&quot;normal&quot;</td>
de21703 @jsor Fix link in table
authored
139 <td>The speed of the scroll animation as string in jQuery terms (<code>"slow"</code> or <code>"fast"</code>) or milliseconds as integer (See the <a href="http://api.jquery.com/animate">jQuery Documentation</a>). If set to 0, animation is turned off. Alternatively, this can be a map of options like the one <a href="http://api.jquery.com/animate/#animate-properties-options">jQuery.animate</a> accepts as second argument.</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
140 </tr>
141 <tr>
98f91cb @jsor Fix formatting
authored
142 <td>wrap</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
143 <td>string</td>
144 <td>null</td>
145 <td>Specifies whether to wrap at the first/last item (or both) and jump back to the start/end. Options are <code>"first"</code>, <code>"last"</code>, <code>"both"</code> or <code>"circular"</code> as string. If set to null, wrapping is turned off (default).</td>
146 </tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
147 <tr>
148 <td>vertical</td>
149 <td>boolean</td>
150 <td>null</td>
151 <td>Specifies whether the carousel appears in vertical orientation. Changes the carousel from a left/right style to a up/down style carousel. If not set, jCarousel looks for a class `jcarousel-vertical` on the root element and if found, automatically sets `vertical` to `true`.</td>
152 </tr>
153 <tr>
154 <td>rtl</td>
155 <td>boolean</td>
156 <td>null</td>
157 <td>Specifies wether the carousel appears in RTL (Right-To-Left) mode. If not set, jCarousel looks for `dir` attribute with a value of `rtl` on the root element (or to any of its parent elements) and if found, automatically sets `rtl` to `true`.</td>
158 </tr>
5288642 @jsor Add center option
authored
159 <tr>
160 <td>center</td>
161 <td>boolean</td>
162 <td>false</td>
53e2eef @jsor Fix markup
authored
163 <td>Specifies wether the carousel should be centered inside the root element. <strong>Note:</strong> This feature is experimental and may not work with all carousel setups.</td>
5288642 @jsor Add center option
authored
164 </tr>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
165 </table>
166
167 Navigating the carousel
168 -----------------------
169
170 By default, jCarousel offers no built in way to navigate through the carousel (scroll prev, next or to a specific position).
171
172 You can do that by hand (see "Accessing the jCarousel instance" for available methods) or use a plugin for that.
173
174 A simple example to navigate the carousel:
175
176 $('#mycarousel_prev_button').click(function() {
5cf7571 @jsor Update Readme to reflect latest changes
authored
177 $('#mycarousel').jcarousel('scrollBy', -1);
d5ec656 @jsor Inital import of rewrite for 0.3
authored
178 });
179
180 $('#mycarousel_next_button').click(function() {
5cf7571 @jsor Update Readme to reflect latest changes
authored
181 $('#mycarousel').jcarousel('scrollBy', 1);
d5ec656 @jsor Inital import of rewrite for 0.3
authored
182 });
183
184 A more comfortable way is to use one of the navigation plugins:
185
186 * jquery.jcarousel.buttons.js
187 * jquery.jcarousel.pagination.js
188
189 **Note: Plugins will follow!**
190
191 Defining the number of visible items
192 ------------------------------------
193
194 Sometimes people are confused how to define the number of visible items because there is no option for this as they expect.
195
70e8129 @jsor Readme typos and enhancements
authored
196 You simply define the number of visible items by defining the width (or height for a vertical carousel) of the element which surrounds the list (if you use the default from this document, you do that with the class `.jcarousel` in your skin stylesheet).
d5ec656 @jsor Inital import of rewrite for 0.3
authored
197
198 This offers a lot of flexibility, because you can define the width in pixel for a fixed carousel or in percent for a flexible carousel.
199
200 Vertical carousels
201 ------------------
202
5cf7571 @jsor Update Readme to reflect latest changes
authored
203 To create a vertical carousel, set the `vertical` option to `true`:
70e8129 @jsor Readme typos and enhancements
authored
204
5cf7571 @jsor Update Readme to reflect latest changes
authored
205 $('#mycarousel').jcarousel({vertical: true});
d5ec656 @jsor Inital import of rewrite for 0.3
authored
206
5cf7571 @jsor Update Readme to reflect latest changes
authored
207 Alternatively, you can simply use a class for your root element which contains the string `jcarousel-vertical`:
d5ec656 @jsor Inital import of rewrite for 0.3
authored
208
209 <div class="jcarousel-skin-name">
5cf7571 @jsor Update Readme to reflect latest changes
authored
210 <div id="mycarousel" class="jcarousel-vertical">
d5ec656 @jsor Inital import of rewrite for 0.3
authored
211 <ul>
212 <!-- The content goes in here -->
213 </ul>
214 </div>
215 </div>
216
217 RTL (Right-To-Left) carousels
218 -----------------------------
219
5cf7571 @jsor Update Readme to reflect latest changes
authored
220 To create a carousel in RTL mode, set the `rtl` option to `true`:
221
222 $('#mycarousel').jcarousel({rtl: true});
223
224 Alternatively, you can simply add the `dir` attribute with a value of `rtl` to the root element (or to any of its parent elements):
d5ec656 @jsor Inital import of rewrite for 0.3
authored
225
226 <div class="jcarousel-skin-name">
227 <div id="mycarousel" class="jcarousel" dir="rtl">
228 <ul>
229 <!-- The content goes in here -->
230 </ul>
231 </div>
232 </div>
233
234 Accessing the jCarousel instance
235 --------------------------------
236
4c82965 @jsor Small typo and link to jQuery.sub() docs
authored
237 When you create a jCarousel, the jQuery object will be exchanged with a special version of jQuery which has then additional jCarousel releated methods available (this is done by using [jQuery.sub()](http://api.jquery.com/jQuery.sub)).
d5ec656 @jsor Inital import of rewrite for 0.3
authored
238
239 If you have created a carousel like:
240
241 $(function() {
242 $('#mycarousel').jcarousel();
243 });
244
0999d31 @jsor Rename scroll() to scrollTo()
authored
245 You can access the methods like this (for example the `scrollTo()` method):
d5ec656 @jsor Inital import of rewrite for 0.3
authored
246
5cf7571 @jsor Update Readme to reflect latest changes
authored
247 $('#mycarousel').jcarousel('scrollTo', 2);
d5ec656 @jsor Inital import of rewrite for 0.3
authored
248
249 ### Available methods are:
250
251 <table>
252 <tr>
253 <th>Method</th>
254 <th>Description</th>
255 </tr>
256 <tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
257 <td><pre>.jcarousel('destroy');</pre></td>
84f9d4e @jsor Change access of methods to use jQuery.sub()
authored
258 <td>Removes the jCarousel functionality completely. This will return the element back to its pre-init state. Note that this method returns the original jQuery object and jCarousel related methods are not longer available.</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
259 </tr>
260 <tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
261 <td><pre>.jcarousel('reload');</pre></td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
262 <td>Reloads the carousel. This method is useful to reinitialize the carousel if you have changed the content of the list from the outside.</td>
263 </tr>
264 <tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
265 <td><pre>.jcarousel('items');</pre></td>
a6e67ec @jsor Rename get() to items() which now always returns all items. index() a…
authored
266 <td>Returns all items as jQuery object.</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
267 </tr>
268 <tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
269 <td><pre>.jcarousel('scrollBy', offset [, animate [, callback]]);</pre></td>
292fbed @jsor Replace prev()/next() by scrollBy() and remove scroll option
authored
270 <td>Scrolls by a given offset (offset can be negative to scroll backwards). If <code>callback</code> is given and a valid callback, it is triggered after the animation is finished.</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
271 </tr>
272 <tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
273 <td><pre>.jcarousel('scrollTo', item_or_index [, animate [, callback]]);</pre></td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
274 <td>Scrolls to a given item or index. If the argument <code>animate</code> is given and <code>false</code>, it just jumps to the position without animation. If <code>callback</code> is given and a valid callback, it is triggered after the animation is finished.</td>
275 </tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
276 <tr>
277 <td><pre>.jcarousel('option', name, [value]);</pre></td>
278 <td>Get or set any jCarousel option. If no value is specified, will act as a getter.</td>
279 </tr>
280 <tr>
281 <td><pre>.jcarousel('option', options);</pre></td>
282 <td>Set multiple jCarousel options at once by providing an options object.</td>
283 </tr>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
284 </table>
285
832ae3a @jsor Remove functions for manipulating the list
authored
286 Manipulating the carousel
287 -------------------------
288
6b153c3 @jsor Grammar
authored
289 If you manipulate the carousel from the outside (eg. adding or removing items from the list), ensure that you call `reload()` afterwards so that jCarousel becomes aware of the changes:
832ae3a @jsor Remove functions for manipulating the list
authored
290
291 <script type="text/javascript">
292 $(function() {
293 $('#mycarousel').jcarousel({
294 // Configuration goes here
295 });
296
297 // Append items
298 $('#mycarousel ul')
299 .append('<li>Item 1</li>')
300 .append('<li>Item 2</li>');
301
302 // Reload carousel
5cf7571 @jsor Update Readme to reflect latest changes
authored
303 $('#mycarousel').jcarousel('reload');
832ae3a @jsor Remove functions for manipulating the list
authored
304 });
305 </script>
306
cdcab6c @jsor Add root element/instance specific events and selectors
authored
307 jCarousel specific events
308 -------------------------
d5ec656 @jsor Inital import of rewrite for 0.3
authored
309
0c1fbc3 @jsor Readme tweaks
authored
310 After initialization, jCarousel triggers specific events on the root element and the items of the carousel.
d5ec656 @jsor Inital import of rewrite for 0.3
authored
311
0c1fbc3 @jsor Readme tweaks
authored
312 ### Available root element events are:
d5ec656 @jsor Inital import of rewrite for 0.3
authored
313
314 <table>
315 <tr>
316 <th>Event</th>
317 <th>Description</th>
318 <th>Example</th>
319 </tr>
320 <tr>
98f91cb @jsor Fix formatting
authored
321 <td>jcarouselsetup</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
322 <td>Triggered when the <code>setup</code> method is called.</td>
323 <td>
324 <pre>
c1a4824 @jsor Change event handling again
authored
325 $('#mycarousel').bind('jcarouselsetup', function(carousel) {
326 // "this" refers to the root element
327 // "carousel" is the jCarousel instance
cdcab6c @jsor Add root element/instance specific events and selectors
authored
328 });</pre>
329 </td>
330 </tr>
1f30653 @jsor Changed event handling
authored
331 <tr>
332 <td>jcarouselsetupend</td>
333 <td>Triggered after the <code>setup</code> method is called.</td>
334 <td>
335 <pre>
c1a4824 @jsor Change event handling again
authored
336 $('#mycarousel').bind('jcarouselsetupend', function(carousel) {
337 // "this" refers to the root element
338 // "carousel" is the jCarousel instance
1f30653 @jsor Changed event handling
authored
339 });</pre>
340 </td>
341 </tr>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
342 <tr>
98f91cb @jsor Fix formatting
authored
343 <td>jcarouselreload</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
344 <td>Triggered when the <code>reload</code> method is called.</td>
345 <td>
346 <pre>
c1a4824 @jsor Change event handling again
authored
347 $('#mycarousel').bind('jcarouselreload', function(carousel) {
348 // "this" refers to the root element
349 // "carousel" is the jCarousel instance
cdcab6c @jsor Add root element/instance specific events and selectors
authored
350 });</pre>
351 </td>
352 </tr>
353 <tr>
1f30653 @jsor Changed event handling
authored
354 <td>jcarouselreloadend</td>
355 <td>Triggered after the <code>reload</code> method is called.</td>
356 <td>
357 <pre>
c1a4824 @jsor Change event handling again
authored
358 $('#mycarousel').bind('jcarouselreload', function(carousel) {
359 // "this" refers to the root element
360 // "carousel" is the jCarousel instance
1f30653 @jsor Changed event handling
authored
361 });</pre>
362 </td>
363 </tr>
364 <tr>
98f91cb @jsor Fix formatting
authored
365 <td>jcarouseldestroy</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
366 <td>Triggered when the <code>destroy</code> method is called.</td>
367 <td>
368 <pre>
c1a4824 @jsor Change event handling again
authored
369 $('#mycarousel').bind('jcarouseldestroy', function(carousel) {
370 // "this" refers to the root element
371 // "carousel" is the jCarousel instance
cdcab6c @jsor Add root element/instance specific events and selectors
authored
372 });</pre>
373 </td>
374 </tr>
375 <tr>
1f30653 @jsor Changed event handling
authored
376 <td>jcarouseldestroyend</td>
377 <td>Triggered after the <code>destroy</code> method is called.</td>
378 <td>
379 <pre>
c1a4824 @jsor Change event handling again
authored
380 $('#mycarousel').bind('jcarouseldestroyend', function(carousel) {
381 // "this" refers to the root element
382 // "carousel" is the jCarousel instance
1f30653 @jsor Changed event handling
authored
383 });</pre>
384 </td>
385 </tr>
386 <tr>
292fbed @jsor Replace prev()/next() by scrollBy() and remove scroll option
authored
387 <td>jcarouselscrollby</td>
388 <td>Triggered when the <code>scrollBy</code> method is called.</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
389 <td>
390 <pre>
c1a4824 @jsor Change event handling again
authored
391 $('#mycarousel').bind('jcarouselscrollby', function(carousel, offset, animate) {
392 // "this" refers to the root element
393 // "carousel" is the jCarousel instance
394 // "offset" is the offset jCarousel was requested to scroll by
395 // "animate" is a boolean indicating whether jCarousel was requested to do an animation
cdcab6c @jsor Add root element/instance specific events and selectors
authored
396 });</pre>
397 </td>
398 </tr>
399 <tr>
292fbed @jsor Replace prev()/next() by scrollBy() and remove scroll option
authored
400 <td>jcarouselscrollbyend</td>
401 <td>Triggered after the <code>scrollBy</code> method is called.</td>
1f30653 @jsor Changed event handling
authored
402 <td>
403 <pre>
c1a4824 @jsor Change event handling again
authored
404 $('#mycarousel').bind('jcarouselscrollbyend', function(carousel, animated) {
405 // "this" refers to the root element
406 // "carousel" is the jCarousel instance
407 // "animated" is a boolean indicating whether jCarousel actually moved
1f30653 @jsor Changed event handling
authored
408 });</pre>
409 </td>
410 </tr>
411 <tr>
0999d31 @jsor Rename scroll() to scrollTo()
authored
412 <td>jcarouselscrollto</td>
413 <td>Triggered when the <code>scrollTo</code> method is called.</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
414 <td>
415 <pre>
c1a4824 @jsor Change event handling again
authored
416 $('#mycarousel').bind('jcarouselscrollto', function(carousel, item, animate) {
417 // "this" refers to the root element
418 // "carousel" is the jCarousel instance
419 // "item" is the item jCarousel was requested to scroll to. This can be either an object or an integer.
420 // "animate" is a boolean indicating whether jCarousel was requested to do an animation
cdcab6c @jsor Add root element/instance specific events and selectors
authored
421 });</pre>
422 </td>
423 </tr>
1f30653 @jsor Changed event handling
authored
424 <tr>
0999d31 @jsor Rename scroll() to scrollTo()
authored
425 <td>jcarouselscrolltoend</td>
426 <td>Triggered after the <code>scrollTo</code> method is called.</td>
1f30653 @jsor Changed event handling
authored
427 <td>
428 <pre>
c1a4824 @jsor Change event handling again
authored
429 $('#mycarousel').bind('jcarouselscrolltoend', function(carousel) {
430 // "this" refers to the root element
431 // "carousel" is the jCarousel instance
432 // "animated" is a boolean indicating whether jCarousel actually moved
1f30653 @jsor Changed event handling
authored
433 });</pre>
434 </td>
435 </tr>
5cf7571 @jsor Update Readme to reflect latest changes
authored
436 <tr>
437 <td>jcarouselanimate</td>
438 <td>Triggered when jCarousel starts a animation.</td>
439 <td>
440 <pre>
c1a4824 @jsor Change event handling again
authored
441 $('#mycarousel').bind('jcarouselanimate', function(carousel) {
442 // "this" refers to the root element
443 // "carousel" is the jCarousel instance
5cf7571 @jsor Update Readme to reflect latest changes
authored
444 });</pre>
445 </td>
446 </tr>
447 <tr>
448 <td>jcarouselscrolltoend</td>
449 <td>Triggered after jCarousel has finished a animation.</td>
450 <td>
451 <pre>
c1a4824 @jsor Change event handling again
authored
452 $('#mycarousel').bind('jcarouselanimateend', function(carousel) {
453 // "this" refers to the root element
454 // "carousel" is the jCarousel instance
5cf7571 @jsor Update Readme to reflect latest changes
authored
455 });</pre>
456 </td>
457 </tr>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
458 </table>
459
19714cb @jsor Add note about binding events
authored
460 **Note:** Some events like `jcarouselsetup` are triggered from the constructor, so you have to bind the events **before** you initialize the carousel:
461
462 $('#mycarousel')
61e1bc6 @jsor Add indention and linebreaks
authored
463
464 // Bind first
c1a4824 @jsor Change event handling again
authored
465 .bind('jcarouselsetup', function(carousel) {
61e1bc6 @jsor Add indention and linebreaks
authored
466 // Do something
467 })
468
469 // Initialize at last step
470 .jcarousel();
19714cb @jsor Add note about binding events
authored
471
cdcab6c @jsor Add root element/instance specific events and selectors
authored
472 ### Available item events are:
473
474 <table>
475 <tr>
476 <th>Event</th>
477 <th>Description</th>
478 <th>Example</th>
479 </tr>
480 <tr>
98f91cb @jsor Fix formatting
authored
481 <td>jcarouselitemfirstin</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
482 <td>Triggered when the item becomes the first visible item.</td>
483 <td>
484 <pre>
c1a4824 @jsor Change event handling again
authored
485 $('#mycarousel li').bind('jcarouselitemfirstin', function(carousel) {
486 // This is now the first visible item
487 // "this" refers to the item element
488 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
489 });</pre>
490 </td>
491 </tr>
492 <tr>
98f91cb @jsor Fix formatting
authored
493 <td>jcarouselitemfirstout</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
494 <td>Triggered when the item is no longer the first visible item.</td>
495 <td>
496 <pre>
c1a4824 @jsor Change event handling again
authored
497 $('#mycarousel li').bind('jcarouselitemfirstout', function(carousel) {
498 // This is no longer the first visible item
499 // "this" refers to the item element
500 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
501 });</pre>
502 </td>
503 </tr>
504 <tr>
98f91cb @jsor Fix formatting
authored
505 <td>jcarouselitemlastin</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
506 <td>Triggered when the item becomes the last visible item.</td>
507 <td>
508 <pre>
c1a4824 @jsor Change event handling again
authored
509 $('#mycarousel li').bind('jcarouselitemlastin', function(carousel) {
510 // This is now the last visible item
511 // "this" refers to the item element
512 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
513 });</pre>
514 </td>
515 </tr>
516 <tr>
98f91cb @jsor Fix formatting
authored
517 <td>jcarouselitemlastout</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
518 <td>Triggered when the item is no longer the last visible item.</td>
519 <td>
520 <pre>
c1a4824 @jsor Change event handling again
authored
521 $('#mycarousel li').bind('jcarouselitemlastout', function(carousel) {
522 // This is no longer the last visible item
523 // "this" refers to the item element
524 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
525 });</pre>
526 </td>
527 </tr>
528 <tr>
98f91cb @jsor Fix formatting
authored
529 <td>jcarouselitemvisiblein</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
530 <td>Triggered when the item becomes a visible item.</td>
531 <td>
532 <pre>
c1a4824 @jsor Change event handling again
authored
533 $('#mycarousel li').bind('jcarouselitemvisiblein', function(carousel) {
534 // This is now a visible item
535 // "this" refers to the item element
536 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
537 });</pre>
538 </td>
539 </tr>
540 <tr>
98f91cb @jsor Fix formatting
authored
541 <td>jcarouselitemvisibleout</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
542 <td>Triggered when the item is no longer a visible item.</td>
543 <td>
544 <pre>
c1a4824 @jsor Change event handling again
authored
545 $('#mycarousel li').bind('jcarouselitemvisibleout', function(carousel) {
546 // This is no longer a visible item
547 // "this" refers to the item element
548 // "carousel" is the jCarousel instance
d5ec656 @jsor Inital import of rewrite for 0.3
authored
549 });</pre>
550 </td>
551 </tr>
552 </table>
553
cdcab6c @jsor Add root element/instance specific events and selectors
authored
554 jCarousel specific selectors
555 ----------------------------
556
0c1fbc3 @jsor Readme tweaks
authored
557 After initialization, you can use jCarousel specific selectors on the root element and on the items of the carousel.
d5ec656 @jsor Inital import of rewrite for 0.3
authored
558
0c1fbc3 @jsor Readme tweaks
authored
559 ### Available root element selectors are:
cdcab6c @jsor Add root element/instance specific events and selectors
authored
560
561 <table>
562 <tr>
563 <th>Selector</th>
564 <th>Description</th>
565 <th>Example</th>
566 </tr>
567 <tr>
98f91cb @jsor Fix formatting
authored
568 <td>:jcarousel</td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
569 <td>Selects elements which have a initialized jcarousel instance applied.</td>
5cf7571 @jsor Update Readme to reflect latest changes
authored
570 <td><pre>$(':jcarousel');</pre></td>
cdcab6c @jsor Add root element/instance specific events and selectors
authored
571 </tr>
572 </table>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
573
cdcab6c @jsor Add root element/instance specific events and selectors
authored
574 ### Available item selectors are:
d5ec656 @jsor Inital import of rewrite for 0.3
authored
575
576 <table>
577 <tr>
578 <th>Selector</th>
579 <th>Description</th>
580 <th>Example</th>
581 </tr>
582 <tr>
bd963e9 @jsor Make selectors more readable
authored
583 <td>:jcarousel-item-first</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
584 <td>Selects the first visible element.</td>
bd963e9 @jsor Make selectors more readable
authored
585 <td><pre>$('#mycarousel :jcarousel-item-first');</pre></td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
586 </tr>
587 <tr>
bd963e9 @jsor Make selectors more readable
authored
588 <td>:jcarousel-item-last</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
589 <td>Selects the last visible element.</td>
bd963e9 @jsor Make selectors more readable
authored
590 <td><pre>$('#mycarousel :jcarousel-item-last');</pre></td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
591 </tr>
592 <tr>
bd963e9 @jsor Make selectors more readable
authored
593 <td>:jcarousel-item-visible</td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
594 <td>Selects all visible elements.</td>
bd963e9 @jsor Make selectors more readable
authored
595 <td><pre>$('#mycarousel :jcarousel-item-visible');</pre></td>
d5ec656 @jsor Inital import of rewrite for 0.3
authored
596 </tr>
597 </table>
598
599 Credits
600 -------
601
547867a @jsor Small fixes in readme
authored
602 jCarousel is written on top of [jQuery](http://jquery.com) and is inspired by the [Carousel Component](http://billwscott.com/carousel/) by [Bill Scott](http://looksgoodworkswell.com).
Something went wrong with that request. Please try again.