Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A simple javascript carousel for sliding NOT only images.
Branch: master
Pull request Compare This branch is even with doomhz:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
assets
pics
README
demo.html

README

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>
Something went wrong with that request. Please try again.