Install files
Installing the carouFredSel jQuery plugin is actually pretty simple. You just need to add the Following code to the <head>
of your web page:
This will make sure all the required files are loaded properly. If you have the carouFredSel CSS and Javascript files in a subfolder you will need to add it to the path. Note that the carouFredSel jQuery plugin requires jQuery v1.7+ to work.
Add markup
The HTML markup for carouFredSel is also very simple. You simply need to create a div with an id (#carousel
in this case) and add some content to it:
The content can be whatever you want, including HTML. For example:
Hook up the carousel
Finally you need to hook up the carousel by adding the following code after the three links we included in the <head>
:
Note: After the plugin has been executed, the container-element has been wrapped inside a div-element with the class caroufredsel_wrapper
.
Play with settings
carouFredSel has plenty of settings to fiddle with. Below is an example of the code with all available options and their defaults:
Note: In all callback functions, this
refers to the HTML-element of the carousel, except for the auto.progress.updater
callback function, where it refers to the HTML-element of auto.progress.bar
and the pagination.anchorBuilder
callback function, where it refers to the HTML-element of the current item.
Advanced configuration
See the carouFredSel Advanced configuration page.
Options for the plugin
After the configuration-object, a second object can be passed to the method containing options for the plugin itself.
Option | Default value | Datatype | Description | |
debug | false | Boolean | Determines whether to log debugging information to the console. | |
transition | false | Boolean | Determines whether to use CSS3 transitions instead of javascript animations. To enable this feature, youll need to include the jQuery.transit-plugin. | |
onWindowResize | throttle | String | Enter "throttle" to use the throttle-plugin to rate-limit the carousel updating onWindowResize. Or "debounce" to use the debounce-plugin.To enable this feature, youll need to include the jQuery.throttle-debounce-plugin. | |
wrapper | Object | A map of the configuration for the wrapper: element and classname . | ||
{ | ||||
element | "div" | String | Type of DOM-element to create for the wrapper. | |
classname | "caroufredsel_wrapper" | String | The classname to use for the wrapper. | |
} | ||||
String | Enter "parent" to use the parent element as the carousel-wrapper. | |||
events | Object | A map of the configuration for the events: prefix and namespace . | ||
{ | ||||
prefix | "" | String | Prefix for all events. | |
namespace | "cfs" | String | Namespace for all events. | |
} | ||||
classnames | Object | A map of the configuration for the classnames: selected , hidden and disabled . | ||
{ | ||||
selected | "selected" | String | Classname for the selected pagination anchor. | |
hidden | "hidden" | String | Classname for the hidden navigational buttons. | |
disabled | "disabled" | String | Classname for the disabled navigational buttons. | |
paused | "paused" | String | Classname for the play-button if the carousel is paused. | |
stopped | "stopped" | String | Classname for the play-button if the carousel is stopped. | |
} |