Installing the carouFredSel jQuery plugin is actually pretty simple. You just need to add the Following code to the
<head> of your web page:
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.
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.
A map of the configuration for the wrapper: element and classname.
Type of DOM-element to create for the wrapper.
The classname to use for the wrapper.
Enter "parent" to use the parent element as the carousel-wrapper.
A map of the configuration for the events: prefix and namespace.
Prefix for all events.
Namespace for all events.
A map of the configuration for the classnames: selected, hidden and disabled.
Classname for the selected pagination anchor.
Classname for the hidden navigational buttons.
Classname for the disabled navigational buttons.
Classname for the play-button if the carousel is paused.
Classname for the play-button if the carousel is stopped.
Use block elements that float left
To ensure the plugin is able to measure the correct sizes, always use display: block; for the items. In a horizontal carousel, you should also make the items float: left;.
When using the carouFredSel plugin, you may see a Flash Of Unstyled Content (F.O.U.C.). This is because the browser may render elements before the DOM is fully loaded and before the DOMContentLoaded event is fired. Fortunately it can be prevented, pretty easy actually. Simply apply something like the following CSS to your HTML element.