A jQuery plugin to create a carousel. Extremely lightweight (< 2kb), easily customizable using CSS.
Add the following html to your page:
<div id="carousel" class="dcCarousel">
<div class="items">
<div rel="1" class="item">
Item 1
</div>
<div rel="2" class="item">
Item 2
</div>
etc...
</div>
<div class="carousel-holder">
<a href="#" class="arrowl"><</a>
<div class="holder">
<ul>
<li class="selected"><a href="#">1</a></li>
<li><a href="#">2</a></li>
etc...
</ul>
</div>
<a href="#" class="arrowr">></a>
</div>
<div class="padder">
<div class="outer-center">
<ul class="controls inner-center"></ul>
<div style="clear: both;"></div>
</div>
</div>
</div>
Obviously the etc... is there indicating that you should add further items
Add this to your $(document).ready
function:
$("#carousel").carousel();
Or with options:
$("#carousel").carousel({showPager: false});
perpage
The number of items to display per page on the carousel
width
The width in pixels of the carousel container
showPager
Whether the paging dots should be shown or not
animationSpeed
The speed of the animation to navigate through the carousel
animationType
The type of animation you wish to use. These are swing
or linear
startPage
If you wish to start the carousel on a different page to 1
onPageChangeStart
Callback function to be executed before the page is changed
onPageChangeEnd
Callback function to be executed after the page is changed