jQuery Doom Carousel Plugin

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:

Any feedback and plugin improvement ideas are welcome.

Please support this free plugin developement and

2 Responses to jQuery Doom Carousel Plugin

  1. [...] few days ago I decided to display the most 5 accessed pages on the site in a rotating carousel. The first idea was to track all the visits on my site with PHP and create a simple algorithm to [...]

  2. [...] comes jQuery Doom Carousel with the ability of the jQuery Easing plugin integration. Source [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Switch to our mobile site