Dumitru Glavan

jQuery Doom Carousel Plugin

• Demo
• Download
• Source
• jQuery page

There are a lot of jQuery sliders and carousels out there but it’s usually a pain in the *ss to use one for a specific task.

I tried to code one for my projects:

1. Light and simple
2. Easy to modify
3. Style from CSS
4. Lots of callback functions
5. Enable/disable features
6. Enable/disable/add effects
7. Easy to extend

Here comes jQuery Doom Carousel with the ability of the jQuery Easing plugin integration.

Easy steps to include the plugin:

1. Include the carousel.css style
2. Include the doomCarousel.min.js file
3. Activate the plugin: $(‘#doom-carousel’).doomCarousel();

Advanced options that can be set:

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):

Tells if the carousel should slide automatically.

slideDuration (3000):

Sets the timing for autosliding.

itemWidth (0):

By default the carousel tries to detect the img width automatically. 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.

Here are some implementation examples. First, some default implementation example:

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

Implementation with jQuery Easing plugin:

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

Implementation with a fade transition:

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

Hope this plugin will be useful for you. I already used it in two projects, so you can see it in action:

• Predau-leasing.ro jQuery Doom Carousel example
• Paragon.fi jQuery Doom Carousel example

Any feedback and plugin improvement ideas are welcome.

• Demo
• Download
• Source
• jQuery page

Copyright © 2013 Dumitru Glavan. Entries (RSS). Clean Simple White Theme by Mazznoer. Powered by WordPress.