DragCarousel - jQuery Plugin

DragCarousel is a jQuery plugin that I wrote as a part of my new website design. This is my first jQuery plugin and it is great! DragCarousel will take an element and make what ever you put inside it draggable, but that’s not all. You can actually throw the elements from one side to the other and they bounce at either end. See the example below:

House of Fraser Mobile Horse Equine Mobileshop.com North Wheatley School PurpleCutMedia Richard Davison Shoplaptop Trans Science Value Comparison

The Setup:

The HTML
First, the HTML. This is easy, all you have to do is have a element for the outer container, one element nested inside the container that will be draggable and all the items that you wish to be draggable inside that. Here is what the example above looks like in the HTML code:

<div id="dragCarousel">
    <span>
      <img src="/images/sites/2/home/hof.png" alt="House of Fraser Mobile" title="House of Fraser Mobile">
      <img src="/images/sites/2/home/horseequine.png" alt="Horse Equine" title="Horse Equine">
      <img src="/images/sites/2/home/mobileshop.png" alt="Mobileshop.com" title="Mobileshop.com">
      <img src="/images/sites/2/home/northwheatley.png" alt="North Wheatley School" title="North Wheatley School">
      <img src="/images/sites/2/home/purplecutmedia.png" alt="PurpleCutMedia" title="PurpleCutMedia">
      <img src="/images/sites/2/home/richard-davison.png" alt="Richard Davison" title="Richard Davison">
      <img src="/images/sites/2/home/shoplaptop.png" alt="Shoplaptop" title="Shoplaptop">
      <img src="/images/sites/2/home/trans-science.png" alt="Trans Science" title="Trans Science">
      <img src="/images/sites/2/home/valuecomparison.png" alt="Value Comparison" title="Value Comparison">
    </span>
</div>

The JavaScript
The next thing you need to do after the HTML is include the correct JavaScript files. This is what you need to include:

<script type="text/javascript" src="/assets/javascript/lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/assets/javascript/lib/jquery-ui-1.7.2.js"></script>
<script type="text/javascript" src="/assets/javascript/lib/dragcarousel.jquery.js"></script>

Then in a JavaScript file that is included after the files I mentioned above do the following:

// Check that the element for the outer container exists.
if($("#dragCarousel").length)
{
    // Initiate the dragcarousel.
    $("#dragCarousel").dragcarousel();
}

The CSS
Once you have the HTML and JavaScript set up all you have to do is add the style, this is what I used:

#dragCarousel
{
    float: left;
    height: 380px;
    margin-top: 15px;
    overflow:hidden;
    width: 100%;
}

Customisation
Feel free to customise all the HTML and CSS you like and have a play with the JavaScript options that this plugin provides, here is a list of the parameters you can pass into dragCarousel and their defaults:

$("#dragCarousel").dragcarousel(
{
    singleElement: "img",
    draggableElement: "span",
    elementsRightMargin: 20,
    dragRevert: false,
    dragRevertDuration: 1000,
    elementCursor: "move",
    elementFadeSpeed: "slow",
    bounceEffect: true,
    bounceSpeed: "slow"
});

You can also provide a call back function that will be called once the drag carousel has been set and is ready for use, you could use this to hide the draggable elements in the container and fade them in once the drag carousel is ready.

Useage
You can use the dragCarousel jQuery plugin for FREE, please spread the word if you like it and provide credit where credit is due! dragCarousel is dependant on:

Get jQuery: jquery.com

Get jQuery UI: jqueryui.com

V1.1