jQuery Carousel Demo (Doom edition)

How To

  1. Include the carousel.css style
  2. Include the doomCarousel.min.js file
  3. Activate the plug-in: $('#doom-carousel').doomCarousel();


leftBtn ('.doom-carousel-left-btn'):
Selector for prev button.
rightBtn ('.doom-carousel-right-btn'):
Selector for next button.
transitionType ('slide'):
You can set the transition to 'slide', 'fade' or false to change the sliding effect.
slideSpeed ('800'):
Animation slide speed.
easing ('swing'):
Animation transition effect. You can install the jQuery Easing Plugin for more effects: http://gsgd.co.uk/sandbox/jquery/easing/
autoSlide (true):
Tels if the carousel should slide automaticaly.
slideDuration (3000):
Sets the timing for autosliding.
itemWidth (0):
By default carousel tries to detect the item width automaticaly. Normaly you don't need to specify it if you set it in CSS.
itemsToScroll (1):
Specify how many items to scroll on. It's very convinient when you have to show 3 thumbs at once and then scroll to the next 3 thumbs.
showNav (true):
Show prev/next links.
showCaption (true):
Show title caption on slider.
stopOnHover (true):
Stop carousel on mouseover so the user can view the slide content. Start the carousel on mouseout.
onLoad (null):
Callback function that is called after the carousel is loaded and started.


Very simple example

<script type="text/javascript">
	$(document).ready(function () {

Example with jQuery Easing plugin

<script type="text/javascript">
	$(document).ready(function () {

Example with fade transition

<script type="text/javascript">
	$(document).ready(function () {