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:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.carouFredSel.js" type="text/javascript"></script>


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:


<div id="carousel">     <img src="img1.jpg" width="300" />     <img src="img2.jpg" width="300" />     <img src="img3.jpg" width="300" />     <img src="img4.jpg" width="300" /> </div>


The content can be whatever you want, including HTML. For example:


<div id="carousel">     <div>         <h3>Infinity</h3>         <p>A concept that in many fields refers to a quantity without bound or end.</p>     </div>     <div>         <h3>Circular journey</h3>         <p>An excursion in which the final destination is the same as the starting point.</p>     </div>     <div>         <h3>jQuery</h3>        <p>jQuery  is a cross-browser JavaScript library designed to simplify the client-side scripting.</p>     </div> </div>


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>:


<script type="text/javascript"> $(document).ready(function() {     // Using default configuration     $(#carousel).carouFredSel();     // Using custom configuration     $(#carousel).carouFredSel({         items     : 2,         direction : "up",         scroll : {             items         : 1,             easing        : "elastic",             duration      : 1000,             pauseOnHover  : true         }     }); }); </script>


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:


$(#carousel).carouFredSel({     circular: true,    // Determines whether the carousel should be circular.     infinite: true,    // Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.     responsive: false, // Determines whether the carousel should be responsive. If true, the items will be resized to fill the carousel.     direction: "left", // The direction to scroll the carousel. Possible values: "right", "left", "up" or "down".     width: null,       // The width of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable widths), "auto" (measure the widest item) or a percentage like "100%" (only applies on horizontal carousels)     height: null,      // The height of the carousel. Can be null (width will be calculated), a number, "variable" (automatically resize the carousel when scrolling items with variable heights), "auto" (measure the tallest item) or a percentage like "100%" (only applies on vertical carousels)     align: "center",   // Whether and how to align the items inside a fixed width/height. Possible values: "center", "left", "right" or false.     padding: null,     // Padding around the carousel (top, right, bottom and left). For example: [10, 20, 30, 40] (top, right, bottom, left) or [0, 50] (top/bottom, left/right).     synchronise: null, // Selector and options for the carousel to synchronise: [string selector, boolean inheritOptions, boolean sameDirection, number deviation] For example: ["#foo2", true, true, 0]     cookie: false,     // Determines whether the carousel should start at its last viewed position. The cookie is stored until the browser is closed. Can be a string to set a specific name for the cookie to prevent multiple carousels from using the same cookie.     onCreate: null     // Function that will be called after the carousel has been created. Receives a map of all data. });


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.


OptionDefault valueDatatypeDescription

debugfalseBooleanDetermines whether to log debugging information to the console.

transitionfalseBooleanDetermines whether to use CSS3 transitions instead of javascript animations.

To enable this feature, youll need to include the jQuery.transit-plugin.


onWindowResizethrottleStringEnter "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.

wrapperObjectA map of the configuration for the wrapper: element and classname.
{

element"div"StringType of DOM-element to create for the wrapper.

classname"caroufredsel_wrapper"StringThe classname to use for the wrapper.
}

StringEnter "parent" to use the parent element as the carousel-wrapper.
eventsObjectA map of the configuration for the events: prefix and namespace.
{

prefix""StringPrefix for all events.

namespace"cfs"StringNamespace for all events.
}
classnamesObjectA map of the configuration for the classnames: selectedhidden and disabled.
{

selected"selected"StringClassname for the selected pagination anchor.

hidden"hidden"StringClassname for the hidden navigational buttons.

disabled"disabled"StringClassname for the disabled navigational buttons.

paused"paused"StringClassname for the play-button if the carousel is paused.

stopped"stopped"StringClassname for the play-button if the carousel is stopped.
}