jCarousel Lite – A jQuery plugin


jcarousellite-image

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.

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. If you like interesting effects, include the Easing plugin as well (Optional). 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/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"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

Step 3:

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

$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});

If you have any comments/suggestions/requests, feel free to drop in a comment or you can find me lurking around the jquery mailing list.

Update

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

1,383 Comments

  1. junxi   •  

    Can I use images of different sizes in this plugin?
    I tried,but it’s not perfect.
    So can you give me some suggestions?

  2. she-codes   •  

    Ganesh, there is an issue when I use the slider with html content. I don’t know if it is designed to be used only with images, but for the most part it works ok with html content.

    The issue is when there are and tags in this html content – they get added some styles too and it breaks the layout. Would it be possible to restrict your plugin to add width and positioning styles only on top level ul and li tags – the containers?

  3. Marco   •  

    Hi

    First of all compliment for jcarousolite, I use this in many project and always work fine.

    I have create a plugin using your jquery plugin jcarousolite, but when I open a modal window (image) and after close it, then the scroll become crazy and go back and forth without stop.

    All request made with ajax create this issue.

    Do you have a suggestion what can be issue?

    thanks

  4. monica sharma   •  

    hi Ganesh,
    I want to know, is there any license to use your slider in commercial website.

  5. Sweta Chotalia   •  

    Hi,

    I have bind repeater to jcarousel slider. But first item of repeater is displayed twice, else its working properly. I am using below code for jcarousel :-

    $(function() {
    $(“.slider2″).jCarouselLite({
    btnNext: “.next”,
    btnPrev: “.prev”,
    auto: 1000, // done by vaibhav
    speed: 1000, // done by vaibhav
    visible: 5,
    pauseOnMouseOver: true,

    });

    });

    Thanks in advance

  6. Linenore   •  

    Anybody have any information, how can I do the same for my Magento E-commerce portal ….www.linenore.com

  7. Richard Bland   •  

    Hi Ganesh,

    I am having a problem in IE8 and below:

    The carousel is only showing one image in a line despite setting it to display 5 in a row. The carousel itself works but shows one image at a time.

    You can see it here: http://www.arnott-conveyors.co.uk/mk5-vertical-conveyor.html

    Firefox, Safari, and Chrome are all fine.

    If anyone knows a workaround I would be grateful.

    Thank you :-)

  8. Alexandre Muranaka   •  

    Hello,

    I had a problem using the scroll and view options with circular false

    my case: I have 22 lines in the carousel and the setting options are:

    scroll:8
    view:8
    circular:false

    The carousel doesn’t show the last 6 lines.

    And about the issue: display:none in the “knownIssues” section
    I used a callback function to turn on the carousel that was previous display:none in CSS

    I do not know if this is the best solution, maybe we could solve with another function using bind() and unbind() or live() and die() from jquery.

    What do you think about it ?

    Ps: Carousel Lite is very great tool, my sincere congrats, at my work we are using as a standard when we need one. =]

  9. Husain   •  

    i can use only five images in the carousal if i add images to carosal div the navigation of images location changes when the images increase from 5

  10. DJ   •  

    Great script. Had a question about customization… We use the jcarousel lite script to show an image gallery (where readers can easily cycle through a top 10 list of images), however, all of our images are different heights. This causes a problem if there is content below the jcarousel lite. If one image is 100px tall … and the next 9 images are 600px tall … then there will be 500px of space beneath the 100px image (The carousel is always as tall as the tallest element).

    Is there a way to reduce the height of the viewable area to the height of the CURRENT image?

  11. alan   •  

    Ganesh, thank you for this,

    I am trying to include so html inside the slide that includes a list, the in this sub-list gets hijacked as a slide too, is there anyway to work around this?

  12. Nilesh.K   •  

    Hi,
    First of all, I would like to thank you very much for the great plugin. I have used it in many of the sites and found it very easy and effective.
    But this time I am stuck into some issue that I am unable to resolve. I want to show the vertical gallery of images in which three images will be visible at a time and it will show first and third image partly and the second image as it is (Last 25% of first image, 100% of second and 25% of third image vertically). You can visit the website http://empirical2test.prospectportal.com/ and click on ‘Gallery’ to get an idea of how the plugin should work (the code is not live yet but you can get a little idea of how I want to operate on a plugin). The circular option has been set for showing the images in a loop. I am done with all the integration work but could not resolve an issue with image not loading on the second iteration onwards. For the first loop all the images can be seen but for the second loop, first or second image is not being displayed and showing some blank space at that place. On clicking the next or previous button again, that particular image is getting seen. What could have been the issue? Can you please let me get rid of this? Thanks in advance,
    Nilesh.

  13. Sohail   •  

    Hi, great and simple plugin. Just i want to know in auto example i want on mouseover of image it will pause. can you help in this regard or anyone did this.

  14. Sami   •  

    Hi & thanks for a nice lightweight plug-in.

    Fixed a bug with start != 0 && circular == true. This happens if you want to have a looping carousel which stores start index into cookie etc. A good behaviour with many carousel items and pages.

    Changed lines 303-309 to:
    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 == -v – 1 ? itemLength – (v * 2) – 1 : itemLength – (v * 2) – o.scroll;
    }

  15. ycsus   •  

    Hi.
    1. http://www.gmarwaha.com/jquery/jcarousellite/#knownIssues
    There are broken link to this topic.
    2. I had some problem with your library. Problem was in calculation total width of wrapper block, if inner elements has margin.
    Hitch in:
    function width(el) {
    return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’) + 1;

    Why to add one pixel?
    I have substitute your function with standart jquery $(el).outerWidth(true) and it’s fix my problem. Maybe I didn’t consider something, but maybe this information will help you or somebody.

Comments are closed.

If you have any questions/comments, the best way to reach me is via twitter @ganeshmax