Basic Configuration Tutorial

Include Jeesh and Morpheus

The following Ender packages are the requirements: Jeesh, Morpheus and Ender bridge for Morpheus. You can download and include them simply.
Or if you are familiar with Ender you can build all the pre-requirements and ender-carousel into one file:

ender build ender-carousel

To use ender, you need to install node.js, npm and Ender
Alternatively you can include jQuery instead of Jeesh and Morpheus.

Build your HTML structure for the carousel

You need to create all the HTML and CSS codes for your carousel. You will need the following elements to make the carousel work:

The root element, you will call $.carousel on it. Every elements need to be inside this element. It's .carousel in the example code
Window element - it will be the mask of the animated elem wrapper. Defaults to: .window
Item wrapper - defaults to the first child of the window element.
Items: a selector to determine the elements. Defaults to: li
Next pager - defaults to: .next
Previous pager - defaults to: .prev

Example HTML

<div class="carousel">
    <div class="window">
        <ul class="clr">
            <li>
                <img src="#Your Image URL#" alt="#Image description#" width="100" height="100">
            </li>
            [...]
        </ul>
    </div> <!-- .window -->
    <a class="prev">Previous</a>
    <a class="next">Next</a>
</div> <!-- .carousel -->

Add the necessary CSS rules to your stylesheet

The most important part is that you need to set the .window element to be a relative and make it's overflow hidden. This is because we will animate the item container relative to this element. Now you need to make the item wrapper really wide to fit all the elements. Also, you need to make it an absolute element.

Here are the most important parts, but you should check the ender-carousel.css on this page for the full CSS.

Example CSS

.carousel > .window {
    overflow: hidden;
    position: relative;
    height: 100px;
}

/*
    This is the item wrapper,
    it will be animated.
*/
.carousel ul {
    list-style: none;
    width: 10000px;
    top: 0;
    left: 0;
    position: absolute;
}

/*
    These are the items
*/
.carousel li {
    float: left;
    margin: 0 0 0 3px;
}

.carousel li:first-child {
    margin: 0;
}

Initialize the ender-carousel plugin

Now the easy part. You can add a settings object to the carousel method, check the configuration for the details.

$(document).ready(function () {
    $(".carousel").carousel();
});

Go back to the documentation