jCarouselLite - Demo

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"


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"


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

1 2 3 4 5 6 7 8 9 10 11 12

$(".externalControl .carousel").jCarouselLite({
    visible: 3,
    start: 0,
    btnNext: ".externalControl .next",
    btnPrev: ".externalControl .prev",
    [".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);


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.

1 2 3 4 5 6 7 8 9 10 11 12

$(".imageSliderExt .carousel").jCarouselLite({
    btnNext: ".imageSliderExt .next",
    btnPrev: ".imageSliderExt .prev",
    visible: 1,
    [".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