jQuery 3D Feature Image Carousel

For this plugin to work, you will need to include the latest version of jQuery on your webpage BEFORE including this script. This plugin currently works with jQuery verson 1.4, and will most likely work with any further releases. It was originally developed using version 1.3, but will no longer work with that version.

 


After that is included, make sure you also include the css file that goes along with it

You need to structure the features in a very specific manner. Below is the basic layout. For each additional feature you want, include another block of the div with class “feature”. Adding or modifying this structure may produce unexpected results.

Image Caption

This is some information that can go along with an image.
Anything can be placed here, including images.

Image Caption

This is some information that can go along with an image.
Anything can be placed here, including images.

Image Caption

This is some information that can go along with an image.
Anything can be placed here, including images.

Finally, to create a basic carousel (with all the default options), include the following code just below the script tag for the carousel in the header of your website.


$("#featureCarousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});

Options:

// If zero, take original width and height of image
// If between 0 and 1, multiply by original width and height (to get smaller size)
// If greater than one, use in place of original pixel dimensions
largeFeatureWidth :     0,
largeFeatureHeight:  0,
smallFeatureWidth:      .5,
smallFeatureHeight:  .5,
// how much to pad the top of the carousel
topPadding:             20,
// spacing between the sides of the container (pixels)
sidePadding:            30,
// the additional offset to pad the side features from the top of the carousel
smallFeatureOffset:  50,
// indicates which feature to start the carousel at
startingFeature:        1,
// speed in milliseconds it takes to rotate the carousel
carouselSpeed:          1000,
// time in milliseconds to set interval to autorotate the carousel
// set to zero to disable it, negative to go left
autoPlay:               0,
// set to true to enable the creation of blips to indicate how many
// features there are
counterStyle:           1,
// true to preload all images in the carousel before displaying anything
preload:                true,
// Will only display this many features in the carousel
// set to zero to disable
displayCutoff:          0,
// an easing can be specified for the animation of the carousel
animationEasing:        'swing'

Leave a comment