jQuery Feature Carousel Options

Here you can find a listing of all of the available options you can pass in to the carousel. The carousel function takes in just one paremeter: a javascript object with any of the options listed below. Some of them can be a bit confusing, particularly for setting the widths. If you have any issues with the carousel, don't hesitate to contact me or leave a message on the carousel homepage. This carousel is in active development so I should be able to work in feature requests.

Name Description Type Default
largeFeatureWidth Three different possibilities. Value of '0' means take original image width. Between '0' and '1', multiply by original image width. Greater than '1', replace with original image width. integer 0
largeFeatureHeight See above, but for height instead of width. integer 0
smallFeatureWidth Three different possibilities. Value of '0' means take HALF original image width. Between '0' and '1', multiply by original image width. Greater than '1', replace with original image width. integer 0.5
smallFeatureHeight See above, but for height instead of width. integer 0.5
topPadding How much to pad the top of the Carousel from the top edge of the container. integer 20
sidePadding How much to pad the sides of the carousel from the left and right edges of the container. integer 50
smallFeatureOffset How much to ADDITIONALLY pad the two small flanking features from the top edge of the carousel. integer 50
startingFeature Features are numbered starting from 1, in the order they place placed in the HTML. This indicates which feature will begin in the center. integer 1
carouselSpeed Speed in milliseconds it takes for one rotation to complete. integer 1000
autoPlay If greater than '0', time in milliseconds the carousel will wait before automatically rotating. integer 4000
pauseOnHover with autoplay enabled, set this option to true to have the carousel pause rotating when a user hovers over any feature boolean true
stopOnHover with autoplay enabled, set this option to completely stop the autorotate functionality when a user hovers over any feature boolean false
trackerIndividual numbered blips can appear and be used to track the currently centered feature, as well as allow the user to click a number to move to that feature. Set to false to not process these at all and true to process and display them boolean true
trackerSummation a summation of the features can also be used to display an "x Of y" style of tracking this can be combined with the above option as well boolean true
preload A value of 'true' will preload the images in the carousel before displaying it. A value of 'false' will display the carousel without preloading. When not preloading, it is best to specify a precise width/height of the features. boolean true
displayCutoff If greater than '0', will only use this amount of features within the carousel. Any after this number will be ignored. integer 0
animationEasing The easing effect used to animate the features in the carousel. jQuery has two built in effects 'swing' and 'linear'. There are many more transition effects available with this plugin string 'swing'
leftButtonTag The identifer used for the left button/arrow to move the carousel. Use jQuery notation. string '#carousel-left'
rightButtonTag Same as above, but for the right button. string '#carousel-right'
captionBelow Display the caption BELOW the image instead of on top of it. boolean false
movedToCenter A callback function that is fired when a feature has moved to the center position. The jQuery element for the entire feature is provided as an argument. function $.noop
leavingCenter A callback function that is fired when a feature begins leaving the center position. The jQuery element for the entire feature is provided as an argument. function $.noop
clickedCenter A callback function fired when a link in the center feature has been clicked. The jQuery element for the entire feature (not the link) is provided as an argument. function $.noop

 

Additional Customization

Blips: The blips are 100% customizable through the stylesheet provided. The blip HTML is actually built and added to the DOM in the carousel itself, but all styles are contained in the stylesheet. You can play around the spacing of the blips be editing the margin of the .blip class. The background and foreground colors can also be changed. Try using a background image instead of a background color to get a nice effect (like circles instead of squares).

Captions: You can move the caption placement around on top of the image by altering the '#carousel .carousel-feature .carousel-caption' block in the css file. Toy around with some options to get what you'd like. Place the captions below the image by using the option above and the default CSS provided. The background color can be changed here as well.

Further explanation of the callback functions

This carousel provides three useful callback functions, but may be tough to understand for people not savvy in jQuery. Instead of a normal integer or string value passed in as an option, you are passing in a function with one variable as a parameter. The variable you pass in will be filled in by the carousel with a jQuery object describing the feature that was involved. Here is an example:

$(document).ready(function () {
  $("#carousel").featureCarousel({
    movedToCenter: function($feature) {
      // $feature is a jQuery wrapped object describing the featured that is now in the center position.
      var imageUrl = $feature.find('.carousel-image').attr('href');
      alert('A new feature has moved to the center. The HREF of the image is: ' + imageUrl);
    }
  });
});

This can be a bit confusing at first, but thesefunctions will let you be very flexible with what the carousel can show/hide/load onto your site. A decent understanding of JavaScript/jQuery is usually required to make good use of these functions.


 

Still confused?

Leave a comment on the carousel's demonstration page or use the contact form and shoot me a message. I will try and help.