Web Dev

Create attractive circular and responsive carousel with jQuery CarouFredSel

2012-06-16

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it's responsive too.
The carouFredSel-plugin was built using the jQuery-library, you can use it on your blog or website on any kind of managed hosting server.

Features

Fully customizable and skinnable.
Scrolls automatically or by using buttons, keys, the mousewheel or by swiping.
Optionally responsible/fluid/liquid out of the box.
Supports variable item-sizes (also with a variable number of visible items).
Built in keyboard- and mouse-navigation and pagination.
7 Built in effects: none, scroll, directscroll, fade, crossfade, cover and uncover.
Filled with intelligent custom events and loads of options.
Align (left/center/right) items inside the available width/height.
Dynamically add and remove items to/from the carousel.
GET and (re)SET the configuration options after creation.

How to install

Doctype
First, make sure you are using valid DOCTYPE. This is required for the carousels to look and function correctly.

Include nessesary .js files

Include the jQuery library and the carouFredSel-plugin inside the tag of the page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.carouFredSel.js"></script>

Create scrollable content
Create a range of HTML elements and place them inside a container-element.

<div id="foo">
    <img decoding="async" src="img1.jpg" width="300" />
    <img decoding="async" src="img2.jpg" width="300" />
    <img decoding="async" src="img3.jpg" width="300" />
    <img decoding="async" src="img4.jpg" width="300" />
    <img decoding="async" src="img5.jpg" width="300" />
    <img decoding="async" src="img6.jpg" width="300" />
    <img decoding="async" src="img7.jpg" width="300" />
    <img decoding="async" src="img8.jpg" width="300" />
</div>

Fire the plugin
Fire the carouFredSel-plugin on the container-element. For all the configuration-options, have a look at the configuration-page.

$(document).ready(function() {

    // Using default configuration
    $("#foo1").carouFredSel();
     
    // Using custom configuration
    $("#foo2").carouFredSel({
        items               : 2,
        direction           : "up",
        scroll : {
            items           : 1,
            easing          : "easeOutBounce",
            duration        : 1000,                        
            pauseOnHover    : true
        }                  
    });
});

Note: After the plugin has been executed, the container-element has been wrapped inside a div-element with class="caroufredsel_wrapper".

Check the showcase! More than 45 cool examples of different carousels!