Heads up! If you haven't visited the Styling page yet, you may want to do that first. Just a suggestion!

Default Configuration

---

This is the default configuration. The carousel is created with the "next" and "prev" navigation buttons. You don't have to specify anything else unless you want to bend it to your will.

$(".default .carousel").jCarouselLite({
    btnNext: ".default .next",
    btnPrev: ".default .prev"
});

Auto-Scroll

---

Automatically scrolls content based on the time period given in the auto option.

$(".auto .carousel").jCarouselLite({
    auto: 800,
    speed: 1000
});

Scroll more items

---

You can scroll more than one item (the default), using this option. Provide the number of items to scroll, and the items will start scrolling by the specified number when the next or previous button is clicked.

$(".scrollMore .carousel").jCarouselLite({
    btnNext: ".scrollMore .next",
    btnPrev: ".scrollMore .prev",
    scroll: 2
});

Mouse wheel navigation

---

You can use the mouse wheel to scroll from one item to next, not necessarily buttons. Try scrolling your mouse wheel when you hover over the carousel and see what happens. This is not mutually exclusive with the navigation buttons. So, you can use both the navigation buttons and the mouse wheel in the same carousel if you want.
Note: You need the Mouse Wheel plugin for this to work.

$(".mouseWheel .carousel").jCarouselLite({
    mouseWheel: true
});

Mouse wheel and Navigation buttons together.

---

This demo is to show that you can use both mouse wheel and navigation buttons both for the same carousel. Try scrolling your mouse wheel or clicking on the next and previous buttons
Note: You need the Mouse Wheel plugin for this to work.

$(".mouseWheelButtons .carousel").jCarouselLite({
    btnNext: ".mouseWheelButtons .next",
    btnPrev: ".mouseWheelButtons .prev",
    mouseWheel: true
});

Custom Animation. Easing Effects.

---

Easing effect is the best thing that happened to jQuery, after jQuery itself. If you prefer the carousel to animate using an easing effect, all you need to do is supply one. For instance this one uses "bounceout".
Note: You need the easing plugin for this to work.

$(".bounceout .carousel").jCarouselLite({
    btnNext: ".bounceout .next",
    btnPrev: ".bounceout .prev",
    easing: "easeOutBounce",
    speed: 1000
});

Custom Animation. Speed Control.

---

Do you like fast, or do you like slow? Ok, once you make your mind up, specify a speed for the animation.

$(".slower .carousel").jCarouselLite({
    btnNext: ".slower .next",
    btnPrev: ".slower .prev",
    speed: 800
});

Custom Widget.

---

Pretty neat widget. Isn't it? Just click on the thumbnail images and you can see them magically change on the top. Also, i used this opportunity to use another easing effect - "backout"

$(".widget .carousel").jCarouselLite({
    btnNext: ".widget .next",
    btnPrev: ".widget .prev",
    speed: 800,
    easing: "backout"
});

$(".widget img").click(function() {
    $(".widget .mid img").attr("src", $(this).attr("src"));
});

More or Less

---

As far as jCarouselLite is concerned, you are the boss. Since, it is directly under your control, you can increase or decrease the number of visible items.

$(".moreItems .carousel").jCarouselLite({
    btnNext: ".moreItems .next",
    btnPrev: ".moreItems .prev",
    visible: 2
});

Any Content - Not just Images

---

You are not limited to images alone. Any content will do. I guess, you are just limited by your imagination. As you can see i am poor at that.

$(".nonImageContent .carousel").jCarouselLite({
    btnNext: ".nonImageContent .next",
    btnPrev: ".nonImageContent .prev"
});

Mixed Content - Not just Images

---

Again, just to show that you can mix both images and other content.

$(".mixedContent .carousel").jCarouselLite({
    btnNext: ".mixedContent .next",
    btnPrev: ".mixedContent .prev"
});

Vertical

---

Now you can even tilt it vertically, or horizontally. Can it get any better?

$(".vertical .carousel").jCarouselLite({
    btnNext: ".vertical .next",
    btnPrev: ".vertical .prev",
    vertical: true
});

External Controls

---

Buttons, buttons and more buttons. Feel free...

$(".externalControl .carousel").jCarouselLite({
    visible: 3,
    start: 0,
    btnNext: ".externalControl .next",
    btnPrev: ".externalControl .prev",
    btnGo:
    [".externalControl .1", ".externalControl .2",
    ".externalControl .3", ".externalControl .4",
    ".externalControl .5", ".externalControl .6",
    ".externalControl .7", ".externalControl .8",
    ".externalControl .9", ".externalControl .10",
    ".externalControl .11", ".externalControl .12"]
});

Callbacks too!

---

Don't call us, we'll call you. We'll call you once before the animation starts, and once after the animation ends. Each time, a jquery object that selects all the visible items in the carousel will be the argument passed.

$(".callback .carousel").jCarouselLite({
    btnNext: ".callback .next",
    btnPrev: ".callback .prev",
    beforeStart: function(a) {
        alert("Before animation starts:" + a);
    },
    afterEnd: function(a) {
        alert("After animation ends:" + a);
    }
});

Slider

---

Image Slider for your blog. Nothing different here, except for the image size and the number of images visible.But, it's just cooler to see a bigger image.

$(".imageSlider .carousel").jCarouselLite({
    btnNext: ".imageSlider .next",
    btnPrev: ".imageSlider .prev",
    visible: 1,
    speed: 500
});

Image Slider with external controls.

---

External number based control.

$(".imageSliderExt .carousel").jCarouselLite({
    btnNext: ".imageSliderExt .next",
    btnPrev: ".imageSliderExt .prev",
    visible: 1,
    btnGo:
    [".imageSliderExt .1", ".imageSliderExt .2",
    ".imageSliderExt .3", ".imageSliderExt .4",
    ".imageSliderExt .5", ".imageSliderExt .6",
    ".imageSliderExt .7", ".imageSliderExt .8",
    ".imageSliderExt .9", ".imageSliderExt .10",
    ".imageSliderExt .11", ".imageSliderExt .12"]
});

Fraction Configuration

---

You can experiment with real numbers when it comes to number of visible elements. Using this you can give a clue to the user that the carousel has more items by showing half of the last element, while keeping the rest invisible. Take a look...

$(".fraction .carousel").jCarouselLite({
    btnNext: ".fraction .next",
    btnPrev: ".fractions .prev",
    visible: 2.5,
    circular: false
});

Non Circular

---

jCarouselLite carousels are circular by default. You have to explicitly disable circular behavior if you don't want them. Like this.

$(".nonCircular .carousel").jCarouselLite({
    btnNext: ".nonCircular .next",
    btnPrev: ".nonCircular .prev",
    circular: false
});