jCarousel Lite – A jQuery plugin


jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

Did I mention that it weighs just 2 KB?

As if that wasn’t enough, the best part is yet to come… You don’t need any special css file or class name to get this to work. Include the js file. Supply the HTML markup. Then, construct the carousel with just a simple function call.

Visit the project page for more information. There you can find a lot of demos and exhaustive documentation. This blog entry is just a teaser for further exploration.

Installing and getting it to work is as trivial as following the 3 steps given below…

Step 1:

Include a reference to the jQuery library and the jCarouselLite plugin. You can download jQuery here and jCarouselLite here. If you like interesting effects, include the Easing plugin as well (Optional). You may also want to use a compatibility easing plugin if you want to use old easing names. If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.jcarousellite.js"></script>

<!-- Optional -->
<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>

Step 2:

In your HTML file, provide the markup required by the carousel (a div enclosing an ul). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…

<button class="prev">&laquo;</button>
<button class="next">&raquo;</button>

<div class="any-class">
        <li><img src="image/1.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/2.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/3.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/4.jpg" style="width:150px; height:118px;"></li>
        <li><img src="image/5.jpg" style="width:150px; height:118px;"></li>

Step 3:

Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.

$(function() {
        btnNext: ".next",
        btnPrev: ".prev"

If you have any comments/suggestions/requests, feel free to drop in a comment or reach @ganeshmax in twitter.



Based on popular request, jCarouselLite has been updated to support jquery 1.2.x versions. Goto the download page and download version 1.0.1 to enjoy jquery 1.2.x support. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.

Ganeshji Marwaha

I spend my days as the Director of Technology for Mobility practice and help my clients design enterprise and consumer mobile strategies. Mobile Payments, Digital Wallet and Tokenization technologies are my areas of specialization

  • Hey, great tool I have managed to get this to work with Firefox, however I have an issue with IE8.

    Just 1 image is displayed and I cannot scroll to other images?

    My site is http://lewisogden.com

    Thanks for your help

  • Good tool!
    Please, improve cloned elements with data and events.
    [.clone() -> .clone(true)]
    this code:

    if(o.circular) {
    o.start += v;

    Thank you!

  • Nat

    I have used jcarousel lite before and its great but in a current project I have found that when there are 20 images in the unordered list the carousel stops working, no images are displayed and no scroll happens. Is this a know issue or is this unique to me?

  • Yo

    I looked at the example on your website, like it, want to implement it and.. it just doesnt’ work. I have no idea why, because I followed the instructions…
    I have 4 items.. it turns it into 10 (ok, fine) and displays all 10 of them. That way nothing else works. What am I missing??

  • Hari Prasad


    If the content contains links and other tabbable elements, jCarousel is not working when you tab through those elements as it moves left or right while tabbing.

    Is there any fix available for the above problem.

  • Hi,

    I cant seem to get easing to work. I couldn’t see anything in the source code to help me. Could you explain how I am to implement easing? I’m loading the jquery easing plugin.

  • If I have visible: 3, and my div wrapper is 960px, how can I distribute those 3 items equally within the wrapper and adjust the margins accordingly?

    Basically I have 6 images and showing 3 only, I want the to be 100% width relative to the wrapper (960px), and I want a margin between each item which should adjust according.

    How can I do that with your plugin?

  • Pingback: jQuery Plugin #0017: “jCarousel Lite” – Eine kleine Bilder Galerie › klages-newmedia.de Blog()

  • kathy

    Question about getting the next button to line up – right now the next button is way far off to the right…. Here is my html:


    And here is my css for above:

    #list {
    margin:0px auto;

    .slider {
    left: -5000px;
    margin:10px 15px;

    .slider ul {

    .slider ul li {
    padding:0 6px;

    .slider ul li img {
    border:1px solid #999;

    .prev {

    .next {

    .separator { width:100%; height:30px; clear:both; float:left; background: url(images/line.png) 50% 50% no-repeat;}

  • Matt


    Great script. I have implemented it on my client’s site but there seems to be an issue when using the ‘start’ parameter in the default circular mode.

    Here’s an example that has the start parameter set to ‘1’. It seems to work fine:


    But when I change the start parameter to a higher number, say ’23’, the circular mode breaks:


    (Note when you get to the slide titled ‘Calamity Jane’ it stops progressing and whizzes back to ‘Retro Flamingo)

    Have I done something wrong here? Please help!

    – Matt

  • Mohammad

    First of all thanks a lot for this great script. It works like a charm 🙂
    However I have fought a hard battale trying to resize the width of the containing div, så that it may show more images. However I have not been able to change it. Currently it is set to 360px in width.
    When using firebug I can see the styling as :
    visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 360px;
    But I cannot seem to change it.
    Would you please tell me how to change this widht to like 700 px and maybe also put a black thin border around the div.

    Thanks a lot for your effort.


  • Mandar Deshpande

    Could put in a hack to solve the hidden items scroll issue.
    issue : I had 29 items in carousel but and my scroll was 6. Due to this, i was not able to see the last 5 items. For this found a workaround.

    $(o.btnPrev).click(function() {
    if(curr > 6){
    return go(curr-o.scroll);
    } else{
    return go(curr-curr);

    $(o.btnNext).click(function() {
    if(itemLength-(curr+o.scroll) > 6){
    return go(curr+o.scroll);
    } else{
    $(o.btnNext).addClass( ‘disabled’);
    return go(curr+itemLength-(curr+o.scroll));

    I have kept the scroll item 6 in the code. Put this code in thejcarousellite_1.0.1.js file at around line number 255.

    You can change the scroll count as per your requirement.

  • Hi,
    I am using this plugin by setting visible:4 and circular:true but if i have only 1 image then its not visible. Moreover if i have 3 images it only display 2 images, the third one slips while sliding. Does anybody face this type of issue with this plugin

  • Hi,

    Love the script.

    Is there any way to get the next element when scrolling in a before animation callback?


  • Everton Zanon

    Hi Ganesh,

    I’ve changed the plugin to accept click events AND mouseouver events to perform the carrousel animation.
    If you want this version just reply me.


  • hi, this is a great script compared to other alternatives. I just have one problem using it, that it does have infinite carousel loop. I want it to stop on last image and first image.

    Any idea how to do it?

  • Great blog you have here, hope you wont mind if I retweet your blog posts to my twitters account. (:~)

    I think my site to use a jQuery plugin jcarousel lite !
    su ar?tma

  • Lia


    First I just want to say that I tried about 8 different carousels before finding this one. None of them met my needs and I was about to lose it. Finding your carousel was an absolutely project-saver; I don’t know what I would have done without it.

    My client has complained to me that when he clicks on the next/prev arrows too close to when the auto-slideshow timer is about to reset the carousel becomes jumpy or does not respond. I think part of it has to do with his outdated operating system being sluggish and the part is that he is fairly click-happy. But, I can reproduce the problem on my computer so unfortunately I know that it is a real problem.

    Would you happen to have any suggestions to overcome this issue? I would sincerely appreciate any help you can provide.

  • liju

    I too have faced the same problem what 7liter has faced.

  • Hey. Really Nice.
    I have used the carousal effect in one of my Drupal sites.
    Really a great plugins. Thanks.

  • Hi there,

    Congrats for your job! That’s a greate job!

    I have a suggestion for your jcarousel lite. Would be nice if you implement a way to allow more than 1 line of items displayed!

    Well, that’s it.

    Cheers. R.

  • Dax

    If IE6 in your example with vertical carousel there is bug with new line position.

  • Hi, i love your script too.
    But i miss the pause on mouseover.
    Has somebody implemented this?


  • oputz

    oh sorry, found the solution in this post/answer:
    231. Oren on October 29th, 2008 at 1:31 am

  • work great in all browser except in chrome… any thoughts? height not accept chrome, just some 2-3px height. email me to give you the link. thank you.

  • If you have the scroll problem in which some items are not shown because the “scroll” value is not divisible by the amount of items, just edit your .js file close to the line 300 and replace that “if” for the following hack:

    /* Edited by Danny Herran */
    var steps = Math.ceil(itemLength / v);
    var minV = itemLength – (steps * v);
    var maxV = itemLength – v;
    curr = maxV;
    curr = to;
    curr = 0;

  • Jonathan Morales

    Hi all, I have implemented stop on mouse enter. Please see if it works for you.

    It’s basically a 4 steps fix

    1. Add an attribute to the configuration object. pauseOnHover: false. False by default because mouseWheel is false by default.

    2. Add a variable to the anonymous returned function.

    return his.each(function(){ … var autoID; …});

    3 and 4. Save the intervalID into the autoID variable, clear the interval when mouse enters and save intervalID into autoID when mouse leaves

    if (o.auto) {
    autoID = startAutoScrolling(o);

    if (o.pauseOnHover) {
    div.hover(function (eo) {
    if (eo.type == “mouseenter”) {
    } else {
    autoID = startAutoScrolling(o);

    function startAutoScrolling(o) {
    return setInterval(function () {
    go(curr + o.scroll);
    }, o.auto + o.speed);

    Here’s the code

    (function ($) { // Compliant with jquery.noConflict()
    $.fn.jCarouselLite = function (o) {
    o = $.extend({
    btnPrev: null,
    btnNext: null,
    btnGo: null,
    mouseWheel: false,
    auto: null,
    pauseOnHover: false,

    speed: 200,
    easing: null,

    vertical: false,
    circular: true,
    visible: 3,
    start: 0,
    scroll: 1,

    beforeStart: null,
    afterEnd: null
    }, o || {});

    return this.each(function () { // Returns the element collection. Chainable.

    var running = false, animCss = o.vertical ? “top” : “left”, sizeCss = o.vertical ? “height” : “width”;
    var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;

    if (o.circular) {
    ul.prepend(tLi.slice(tl – v – 1 + 1).clone())
    .append(tLi.slice(0, v).clone());
    o.start += v;

    var li = $(“li”, ul), itemLength = li.size(), curr = o.start;
    div.css(“visibility”, “visible”);

    li.css({ overflow: “hidden”, float: o.vertical ? “none” : “left” });
    ul.css({ margin: “0”, padding: “0”, position: “relative”, “list-style-type”: “none”, “z-index”: “1” });
    div.css({ overflow: “hidden”, position: “relative”, “z-index”: “2”, left: “0px” });

    var liSize = o.vertical ? height(li) : width(li), // Full li size(incl margin)-Used for animation
    ulSize = liSize * itemLength, // size of full ul(total length, not just for the visible items)
    divSize = liSize * v, // size of entire div(total length for just the visible items)
    autoID; // ID of the setInterval stored to stop the animation

    li.css({ width: li.width(), height: li.height() });
    ul.css(sizeCss, ulSize + “px”).css(animCss, -(curr * liSize));

    div.css(sizeCss, divSize + “px”); // Width of the DIV. length of visible images

    if (o.btnPrev)
    $(o.btnPrev).click(function () {
    return go(curr – o.scroll);

    if (o.btnNext)
    $(o.btnNext).click(function () {
    return go(curr + o.scroll);

    if (o.btnGo)
    $.each(o.btnGo, function (i, val) {
    $(val).click(function () {
    return go(o.circular ? o.visible + i : i);

    if (o.mouseWheel && div.mousewheel)
    div.mousewheel(function (e, d) {
    return d > 0 ? go(curr – o.scroll) : go(curr + o.scroll);

    if (o.auto) {
    autoID = startAutoScrolling(o);

    if (o.pauseOnHover) {
    div.hover(function (eo) {
    if (eo.type == “mouseenter”) {
    } else {
    autoID = startAutoScrolling(o);

    function startAutoScrolling(o) {
    return setInterval(function () {
    go(curr + o.scroll);
    }, o.auto + o.speed);

    function vis() {
    return li.slice(curr).slice(0, v);

    function go(to) {
    if (!running) {

    if (o.beforeStart)
    o.beforeStart.call(this, vis());

    if (o.circular) { // If circular we are in first or last, then goto the other end
    if (to 1, then the “to” might not be equal to the condition; it can be lesser depending on the number of elements.
    curr = to == o.start – v – 1 ? itemLength – (v * 2) – 1 : itemLength – (v * 2) – o.scroll;
    } else if (to >= itemLength – v + 1) { // If last, then goto first
    ul.css(animCss, -((v) * liSize) + “px”);
    // If “scroll” > 1, then the “to” might not be equal to the condition; it can be greater depending on the number of elements.
    curr = to == itemLength – v + 1 ? v + 1 : v + o.scroll;
    } else curr = to;
    } else { // If non-circular and to points to first or last, we just return.
    if (to itemLength – v) return;
    else curr = to;
    } // If neither overrides it, the curr will still be “to” and we can proceed.

    running = true;

    animCss == “left” ? { left: -(curr * liSize)} : { top: -(curr * liSize) }, o.speed, o.easing,
    function () {
    if (o.afterEnd)
    o.afterEnd.call(this, vis());
    running = false;
    // Disable buttons when the carousel reaches the last/first, and enable when not
    if (!o.circular) {
    $(o.btnPrev + “,” + o.btnNext).removeClass(“disabled”);
    $((curr – o.scroll itemLength – v && o.btnNext)

    return false;

    function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
    function width(el) {
    return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’);
    function height(el) {
    return el[0].offsetHeight + css(el, ‘marginTop’) + css(el, ‘marginBottom’);


  • Ganesh,

    Thanks for the awesome script. We are using this script in many pages of http://zovi.com

    One glitch I have found in the script: Assume that auto=5000 (5 seconds). Now if you click on the next/previous button after 4 seconds of the previous animation, you will go to the next/previous slide (as expected). But the NEXT animation after this will start after just 1 second. Ideally this should start after the next 5 seconds (so that the user gets enough time to look at the slide they just navigated to).

    Basically the timer should be reset when the user moves between the slides.

    Thanks again.

  • Nice plugin. Thanks.

    Is there any way that we can change plugin option in run time?

  • Hi!
    I found an issue in jCarousel Lite: if you call $(…).jCarouselLite(…) twice – you will have an crazy effect with auto scroll by two separate “setInterval” threads.

    One of the solutions is to set a flag to carousel dom element and check it every time you call $(…).jCarouselLite(…)

  • Loren Anderson

    I am experience a problem like this. I am trying to update the data after a certain amount of time through jquery.ajax. After I update the data I am trying to restart the carousel. When I restart it with the:
    $(“#tableapp”).jCarouselLite({}) line I seem to be getting two carousels going at once.

    Could you please elaborate about setting a flag to the dom element? Not am not sure what you are meaning?

  • Hi Ganeshji,

    I really like this plugin and have been using it in a couple of project.
    Recently I’ve made a couple of changes (implemented some of the recommendations in the comments + adding a few changes/fixes of my own) – let me know if your interested and I’ll send you the changes so you could update the plugin.

    Guy n.

  • Hi there, great plugin!

    I tried Jonathans addition, but it doesn’t work for me. I just see my Div expanded with all elements visible and nothing moves. My options are:

    auto: 800,
    speed: 700,
    visible: 8,
    pauseOnHover: true

    I’d really like to be able to set options at run time. Might work on that myself 😉


  • Ah, its because the JS messed from copy’n’pasting it from here.

  • Okay, after replacing a few garbled characters your code works fine for me Jonathan!

  • Rachael Parker


    I am having problems with this plugin in IE 8 and 7. I am using the plugin to scroll through a set of images. The user is then supposed to click on their favourite picture. This then triggers some more jquery. The first time I click next or previous the images sort of jump to the next set instead of scrolling. This then seems to break all the other jquery I have on the page. After the first click on next the scrolling works as it is supposed to.

    the code used to add the carousel is

    btnNext: “.next”,
    btnPrev: “.prev”,

    this is only happening in ie8 and bellow, chrome, ff and ie9 all work correctly any help would be much appreciated!


  • jd

    I’ve got the script working and it’s pretty much exactly waht I’d been looking for all evening. Hooray for that! However, I noticed at random the sizes of the li’s gets upped by 103px. In my stylsheets I’ve declared their width to be 290px and after refreshing the page a few times it shows up as 393px, which throws the whole alignment of it off. Then I refresh again and it’s back to normal. Very odd. Any help would be appreciated.

    Here’s a screenshot. How it should look is on the bottom, how it ends up looking on random is above.

  • Ivan

    I’m facing a problem with jCarousel Lite and AJAX loaded data (not the “how do I load images through AJAX” question, though)

    I load the content in a div and then fire jCarousel Lite: all is fine, pager is working, but I can’t use the .live() function in the loaded content

    For some code, please refer here: http://stackoverflow.com/questions/8835963/jcarousel-lite-with-ajax-loaded-content-live-stops-working

    Please, can you help? Thanks…

  • Jack

    i have carousel with 3 pics and i want to add always to first pic some class. Any ideas?

  • Hi There,

    I attempted to find an alternative means to contact you, however, none such could I find.

    There is a bug, unconfirmed if universal, concerning the btnNext functions (in terms of calculating what is next to appear,) and floats.

    When using floats, curr + o.scroll is interpreted as a string, thus you get, for instance, 4.5 + 1 = 4.51; 4.51 + 1 = 4.511; etc. The solution to this is to re-declare these variables as floats:

    var cu = parseFloat(curr);
    var sc = parseFloat(o.scroll);
    return go(cu + sc);

    There’s an additional bug dealing with scrolling more than the default (whole number) number of slides. For whatever reason, it attempts to scroll the entire element as opposed to a single li. I didn’t investigate a solution to this.

    Hope this helps you with further development.

    Re: 1290 Jack, you could use CSS and the :first pseudo-class. Or you could try isolating the first element with jQuery and adding a class. Look up “jQuery first element.”

  • first of all thank you for this wonderful plugin, Is this compatible with ie6?

  • Jason

    Hi there,

    I’m using the plugin to scroll through a list with each item composed of only text. However, with longer sentences a portion simply disappears rather than wraps. I’ve tried using css with word-wrap: break-word; but it didn’t work. Any ideas?


  • We have been trying to find a circular carousel that will meed our needs, which are not that complex but seem to be unusual in this sphere.

    What we need, as is comon in graphic desig, is for a little of the before and after image to be displayed in the viewable space. We have gotten that to work fine in yours (and in jMyCarousel and jCarousel but they also have bugs that kill us)

    We need up to 26 images in the carousel (number of images is what breaks jMyCarousel and one of the bugs in yours)

    We have set up your jcarouselLite and it does what we need except for 2 bugs. I have put up demos of the problems at


    The first shows that, when you hit the end of the items in the scroll, the last element does not display. When you click on it again it scrolls into the center and everything is fine. You also get a similar behavior if you load the page and just start of using the left side button.

    The second problem is that if you load a certain number of images (I don’t know what the break point is but it is below the 26 we need) then after you scroll for a bit the scroll starts to go crazy and scroll whole bunches of images (on the 18th click in the one here) and does the same on the second click on the left side.

    A fix or workaround would be greatly appreciated.

    BTW, if you want to see the same behavior in jMyCarousel (the too many images scrolls crazily) here is a link.



  • Bernadette

    thanks for this nice carousel.
    I´m new to javascript but implemented the carousel without problems.
    Only problem I have is about the transparency of the images. I have png images with transparent background, furthermore set background-color in css for every class and id to transparent but still the imgs turn out with black background. Doesen´t javascript allow transparent images? Tried out with opacity but then of course the hole image “fades” away. Any suggestions?

  • Great script but ours seems to have a bug….
    have a look at the carousel on http://www.reepol.com it seems to have an extra copy of the first LI at the end then the timing and measurements go all out.
    Any help would be appreciated.

  • Hi, first of all, sorry if my english is not the best.
    I try to use carousel with highslide pluguin, it seems that all works right, since i have to modify the last 3 images. If I try it, then carousel doesn’t work fine. http://s346284961.mialojamiento.es/wordpress/

    A normal tag is like that:

    and with highslide is:

    After some trys, i can say that only fail’s whith onclick event, (with class or a works fine) Can someone help me?

  • Well i can’t show the code :S, if you have firebug or google chrome or something you can see it. 😀

  • Chris

    Any way to get this to work with definition list wrapped in a div rather than unordered list?

    So, rather than this: <ul> <li> </ul>

    Need it to work for this: <div> <dl> </div>

  • Hi, me again. Well after some test i can see that it only fails with google chrome. I can’t understand why it fails, code seems right. I supose it must be problem os jcarousellite.js. Can someone help me?

  • Orlando Leite

    I made a change.

    line 300:
    if(toitemLength-v) return;

    if(to itemLength-v) curr = to = itemLength-v;

    When you have 5 items and {visible:3, scroll:3}, scroll doesn’t work.