jCarousel
Riding carousels with jQuery
Author: Jan Sorgalla
Version: 0.2.3 (Changelog)
Download: jcarousel.tar.gz or jcarousel.zip
Licence: Dual licensed under the MIT and GPL licenses.Introduction
- Carousel with dynamic content loading via JavaScript
- Carousel with dynamic content loading via Ajax
- Carousel with dynamic content loading via Ajax from a PHP script
- Carousel with dynamic content loading via Ajax from the Flickr photo stream
- Carousel with dynamic content loading via Ajax from the Flickr API
- Circular carousel
- Using jCarousel as a Textscroller
- Flexible carousel
- jCarousel and Thickbox 3
- Carousel with custom animation effect
?
<head>
tag of your HTML document:
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script><script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script><link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" /><link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
The download package contains some example skin packages. Feel free to build your own skins based on it.
jCarousel expects a very basic HTML markup structure inside your HTML document:
<ul id="mycarousel" class="jcarousel-skin-name"> <!-- The content goes in here --></ul>
jCarousel automatically wraps the required HTML markup around the list. The class attribute applies the jCarousel skin "name" to the carousel.
To setup jCarousel, add the following code inside the
<head>
tag of your HTML document:
<script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ // Configuration goes here });});</script>
jCarousel accepts a lot of configuration options, see chapter "Configuration" for further informations.
After jCarousel has been initialised, the fully created markup in the DOM is:
<div class="jcarousel-skin-name"> <div class="jcarousel-container"> <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div> <div class="jcarousel-next"></div> <div class="jcarousel-clip"> <ul class="jcarousel-list"> <li class="jcarousel-item-1">First item</li> <li class="jcarousel-item-2">Second item</li> </ul> </div> </div></div>
As you can see, there are some elements added which have assigned classes (in addition to the classes you may have already assigned manually). Feel free to design your carousel with the classes you can see above.
Note:
?
- The skin class "jcarousel-skin-name" has been moved from the
?
<ul>
to the top
<div>
element.
- The?first nested
?
<div>
under
<div class="jcarousel-container">
illustrates a disabled button, the second an enabled one. The disabled button has the attribute
disabled
(which actually makes no sense for
<div>
elements, but you can also use
<button>
elements or whatever you want) as well as the additional class
jcarousel-prev-disabled
(or
jcarousel-next-disabled
).
- All
?
<li>
elements of the list have the class
jcarousel-item-n
assigned where
n
represents the position in the list.
- Not shown here is, that all classes are followed by additional classes with a suffix dependent on the orientation of the carousel, ie.
?
<ul class="jcarousel-list jcarousel-list-horizontal">
for a horizontal carousel.
?
0
(default) then autoscrolling is turned off.
"first"
,
"last"
or
"both"
as string. If set to
null
, wrapping is turned off (default). You can also pass
"circular"
as option to enable support for circular carousels. See the example Circular carousel on how to implement it.
itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<li>
object itself, the index which indicates the position of the item in the list and the state of the carousel action (prev, next or init). Alternatively, you can pass a hash of one or two functions which are triggered before and/or after animation:
itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
<div></div>
?
null
, no next-button is created.
<div></div>
?
null
, no prev-button is created.
jCarousel is inspired by the Carousel Component written by Bill Scott.
?