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();

Options

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.

Implementation

Very simple example

<script type="text/javascript">
	$(document).ready(function () {
		$('#doom-carousel').doomCarousel();
	});
</script>
		

Example with jQuery Easing plugin

<script type="text/javascript">
	$(document).ready(function () {
		$('#doom-carousel').doomCarousel({easing:'easeInOutQuad'});
	});
</script>
		

Example with fade transition

<script type="text/javascript">
	$(document).ready(function () {
		$('#doom-carousel').doomCarousel({transitionType:'fade'});
	});
</script>