Getting started with the carouFredSel jQuery Plugin

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>

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

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 itemsfloat: left;.