doomhz / jquery-carousel Goto Github PK

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.
imgWidth (0):
    By default carousel tries to detect the img width automaticaly. It's good to set this if you encounter some problems with the slider.
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>