Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
68 lines (51 sloc) 1.87 KB
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>