jCarousel Lite – A jQuery plugin August 9th, 2007
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. 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.
For those wondering how to reset the timer when hover or click on a button
// arround line 252
if(o.btnPrev)
$(o.btnPrev).click(function() {
clearInterval(refreshId);
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
clearInterval(refreshId);
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
return go(curr+o.scroll);
});
// arround line 287
if(o.auto)
var refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
$(“.anyClass”).hover(
function() {
clearInterval(refreshId)
},
function() {
refreshId = setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed);
}
);
Ganeshji, thanks for the great plugin. I’ve been using it for various projects but I think I’ve stumbled across a bug. It seems that when circular is set to true and the start index is set to something other than 0, there’s a consistent skipping of images when clicking the previous button.
For example, when circular is set to true, jcarousellite clones the number of visible elements and prepends and appends them in the DOM like this:
visible = 2
start = 4
Some image (cloned)
Some image (cloned)
Some image
Some image
Some image
Some image
Some image
Some image
Some image
Some image (cloned)
Some image (cloned)
What will happen is that it will start on the fourth element (the 6th one down) as expected, but when previous is clicked, it will skip over 4 elements (or whatever start is set to) and land on the element before the first cloned element…in this case “nav-5″. From glancing at the plugin code, there is probably an addition issue with the start value during the ‘is this the first element’ check.
oops, i forgot to escape my markup. imagine li elements surrounding each “Some image” with an id in the order of:
nav-6
nav-7
nav-1
nav-2
nav-3
nav-4
nav-5
nav-6
nav-7
nav-1
nav-2
Sorry for the mess.
ack..i thought I read all these comments. the ordering on the front page has the oldest, not the newest first
. Sorry for posting a known issue…i’ll try the fixes posted. Thanks!
@Dimas & @Kevin
Your issues may be related to the bug I submitted a patch for. The patch can be downloaded here: http://plugins.jquery.com/node/4572
Post your e-mail address if you would like me to send you the patched version.
Dear Ganeshji,
I’m trying to use this great plugin like a shopping cart system… but it’s so diffucult for me to “edit the code” and explain in english.
Maybe, it’s possible a mail contact?
Thank you
Hi Ganeshji,
I have modified a bit the code of the 1.0.1 version to address some issues I had with the carousel in non-circular mode. Let me know if you’re interested in a patch. Here are the issues I addressed:
1- An input parameter was added to give the carousel a start position at load time. I use it to center the carousel on the selected item;
2- It was not possible to see the last items if the list length was not a multiple of the scroll length. It is fixed;
3- The “previous” and “next” buttons were not “disabled” correctly when the position was at the beginning or the end of the list. Now they are.
4- The “disabled” attribute was not set on the “previous” and “next” button upon loading. It was done only after a call to “go”. It’s fixed.
Regards,
jf
hi. i’m trying to make my jcl adjustable to width (container takes 100% and items take 25% each), is it possible to make it scale to container width dynamically without having to refresh the page?
It’ s possible to add an item via Json (Jquery )Ajax call?
Tks
is it possible to have link within the content and when click scroll the page instead of using the control buttons?
Hello. thanks for the great plugin. I found some strange behavior. When using non-image content, the height of the last li element is what determines the height of all elements of the carousel. That is to say, if you have a li tag containing multiple paragraphs, and the last li tag contains just one sentence, all li tags will be truncated to one line.
Great work, Ganesh! I was wondering if you will provide for addition and removal of items in the carousel at run-time?!
Hi,
I am using your widget and it is great. I have a little problem when I try to implement your “Custom Widget” implementation of the jCarousel. If I have 5 pictures in my list the only those 5 pictures are clickable, all of the rest that the jCarousel code creates are not clickable, for example, if I go one step left after the page loads, then the picture that came from the left side is not clickable. What is the problem?
hi,
i don’t undertand why this page works fine (horizontal view) on Safari and FF, but not in IE7 (vertical view) :
http://compagnieterrainvague.fr/test.php
Could someone help me to undestand that ?
thanks a lot,
JG.
I have implemented the custom widget but I want to have different images above and below. eg. create a separate thumbnail to the image above. Can someone tell me how to do this in the javascript?
Thanks
ignore my last post. I did it by using a split and having the tn as a gif and the big one as jpg
$(“.widget .mid img”).attr(“src”, $(this).attr(“src”).split(“.”)[0] + “.jpg”);
So im trying to get this running on my site. I have everything going as id like but one things.
http://www.taultunleashed.com/
Take a look at the images in ie7. Be sure to reload it a few times. You will see it works just fine but its not displaying the bottom carousel. Im almost sure its in my css because if you go to http://taultunleashed.com/tutest.php it looks to be running just fine (at least on my comps). So the problem resides in the original css.
This may well have been addressed already, but I thought I’d drop you a quick note before I quit working for the evening. Here’s a situation I ran up against.
BUG: If you have a scroll>1 and circular=false, then the last scroll will not execute if it has a fewer number of items than the value for scroll, resulting in the last few entries being inaccessible.
SOLUTION: If you modify line 301 to account for the greater scroll value, it will remedy this problem:
if(toitemLength-v+o.scroll) return;
So far, this has been a great plugin, and I look forward to using it on more sites.
Thanks!
Hi, I would just like to say thanks for this super script. Simple and effective. I also made a small upgrade to it that might interest someone else, didn´t take myself the time to read all the comments on this page so this may already have been “fixed”.
I didn´t like that the carousel ride didn´t stop when you clicked another btnGo while it was animating so I just added a few lines and voila. In the function go() find the closing bracket for “if(!running) {” and add this:
else if(running) {
ul.stop();
running = false;
go(to);
}
And there you have it. Now the carousel will stop and go to the new location.
Again thanks, Kristofer.
Hi, I would just like to say thanks for this super script. Simple and effective. I also made a small upgrade to it that might interest someone else, didn´t take myself the time to read all the comments on this page so this may already have been “fixed”.
I didn´t like that the carousel ride didn´t stop when you clicked another btnGo while it was animating so I just added a few lines and voila. In the function go() find the closing bracket for “if(!running) {” and add this:
else if(running) {
ul.stop();
running = false;
go(to);
}
And there you have it. Now the carousel will stop and go to the new location.
Again thanks, Kristofer.
i had a problem with correct display of images when using a btnGo navigation.
f.e. when you have a carousel with 5 images you have 5 buttons from 1 to 5 which display the given image when clicked. i had the problem that when clicking on button 1 image 2 was display and so on and so on.
i changed the btnGo function and now it works:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i-1 : i);
});
});
Has this issue been solved?
…. Internet Explorer 7 (go figure) is scrolling too much with each click of the next button….. posted by John
Thx
I solved it by putting the image as background image not as standalone.
Please put this in know issues.
Hello,
First, i ‘d say your script is a GREAT WORK.
Also, i’ve a question : Is it possible to put a JCarousel Lite IN a JCarousel Lite ?
I ‘ve tried it with my following code but it seems doesn’t work.
//
Titre 1
Texte 1
element 1
element 2
elem corps 1
elem corps 2
Titre 2
Texte 2
gauche 2droite 2
Titre 3
Texte 3
gauche 3droite 3
prevnext
An idea ?
THX for your reply.
Christophe
I love the carousel but while I was trying to implement it on my site, I came across the following problem, that I managed to solve today and am posting here in case anyone else has a similar issue and needs help. I had the carousel displaying 5 items (out of a total of 25, although this is irrelevant!), each set to 20% of the width of the containing div. When I resized the browser to be a smaller width, the carousel still remained the same width, thus giving me a vertical scrollbar. Ideally, I wanted the carousel to resize with the browser. This is how I overcame it:
1. Download and use the non-minified version of jCarousellite (you can re-minimize this later with one of the many online tools out there that do this)
2. Move the variables liSize, ulSize, divSize, ul and curr to be decalred outside of the main function, so that they’re global variables and thus visibile in your main page. Leave where they’re set in the function as close as possible to where they normally would be.
3. Download and use jquery.wresize plug-in – this overcomes a bug in IE which fires mutliple resize events when you resize the window – will make this work alot better and faster.
4. Calculate the current difference between your div containing the ul for the carousel (#carousel in this instance) and your window – win_car_difference = $(window).width() – $(‘#carousel’).width(); Do this as the last thing in your $(document).ready
5. The jquery.wresize will get you to write a resize handler function, which gets called when your resize the window. In this function place the following code, which will change all the carousel variables to get it to work with the new window width:
var W = w.width();
if (win_car_difference != 0)
{
$(‘#carousel’).css(‘width’,W – win_car_difference);
divSize = W – win_car_difference;
$(‘.carousel_li’).css(‘width’,(W – win_car_difference)/5);
liSize = (W – win_car_difference)/5;
ulSize = liSize * itemLength;
ul.css(‘height’, ulSize+”px”).css(‘left’, -(curr*liSize));
$(‘#carousel’).css(‘height’, ‘170px’);
}
In this example, 5 is the number of visible elements in the carousel and the height of each li is 170px – you need to reset this for some reason.
Hope this helps!
Ive seen a couple posts regarding this, but I am updating the # of items in the carousel dynamically and wonder if there is there a way to tell the JCL to ‘refresh’ itself so it isnt cycling to invisible items? Thanks! Great plugin!
-Adam
I found a bug when i ran the code:
$(“.moreimages .images”).jCarouselLite({
btnNext: “.moreimages .next”,
btnPrev: “.moreimages .prev”,
visible: 6
});
if i clicked NEXT first, the images disapeared, but if i clicked PREV, it worked, also if i clicked PREV first, then NEXT it also worked. It also worked as it should when i removed the “visible” tag, so it only showed 3 images.
It fixed itselves when i added
speed: 500,
easing: “easeinout”
That may be a bug you want to feature on your site.
Running MAC os X leopard with safari and Firefox.
Seems like it does not work if you have nested lists. For example I have a carousel of reviews. Inside each review I have a paragraph element and also a rating which is an unordered list. Each nested list item inside the unordered list for ratings is being treated as a carousel item, causing the carousel to work in a very buggy way. I think this needs to be avoided and you should allow for any HTML content to go inside the list items for the carousel. Otherwise a good little plug in.
Has anyone been successful in getting it to work with ASP.NET?
Thanks for this great plugin.
I’ve been experiencing the issue same as the report in post #104. There are already a number of reports like these but I haven’t found any answer to it. However, in my case, it’s only in IE6 where I encountered this.
Here are the settings I used:
circular: false,
visible: 6,
start: 0,
scroll: 6
What happens in IE6 is that the last item is rendered below the first item. It can be seen if the height of the carousel area isn’t set. So that’s why the last strip of the carousel misses the last element.
Has this issue been resolved? Anyone? Hope somebody can post a fix to this.
I have tried Jeremy’s fix at post #201 but it didn’t work for me. Or I might have just missed something. @ Jeremy: Anywhere I can view your revision of jCarousel Lite?
Thanks and more power!
The issue I just mentioned was resolved via css. It appears that IE6 has so many css issues. Great plugin!
Hi All, I have used jCarouselLite many times with clients, and even integrated it with a swap image function AND j.Lightbox. (http://www.drewdernavich.com/portfolio/section/artwork). For a new client, I was having a funny rendering bug (mainly in Safari) where the carousels were loading with larger widths than I had specified, and my CSS gave widths to the wrapper div, ul, lis, and imgs. Until I figured out something so simple, that it took me a long time to think of it. Load your CSS files BEFORE you load your JS files in your head tags… All my render issues are gone now that I switched the placement of the and tags.
Thanks for a wonderful plug-in, Ganeshji.
Hello. Thanks for the great script!
I had to edit it a bit for what I needed, maybe someone else might need it too, so I’ll write down the problem I had.
I needed nested sliding. Vertical sliding inside of horizontal sliding… and it didn’t work (I think because the script couldn’t tell which ul was which). So I changed a line in the script:
var div = $(this)(), ul = $(“ul”, div)
to
var div = $(this).parent(), ul = $(this)
And then, in the page, we call the ul class (or id) instead of the div’s. And everything seems to work!
Thanks again!
Thx! A great jq-module.
Is it possible to get an event when shifting image?
I want an external object to react on the image in the carousel…
Regards,Andreas Ek
Hi, sorry if covered.
Is there a way to make jCarouselLite TRANSPARENT?
I have menu that appears behind, and I want it to be on TOP.
Thanks!
Is is possible to have the fraction configuration with like this:
1/2 image > Full image > 1/2 image
That would be amazing, and exactly what I am looking for. If this is possible, please let me know!
Rob Knecht,
I had such problem!
jcarousellite not working in table cell in IE.
Solution:
Put starting code, lie this:
$(“#jCarouselLite”).jCarouselLite({
auto: 800,
speed: 1000,
visible: 4
});
OUT SITE of Table!
I inserted it just before
And now everything works fine!
I inserted it just before
And now everything works fine!
—————
comments script removes tags…
so, I inserted it just before BODY closing tag.
how do you make it not endless scroll?
I have a set of 20 images and at the end, is there a way to make it stop there and fade out the “next” button similar to the jcarousel?
thx
TIM!
I would love to take a look at your plugin, please email me at madmatter23@comcast.net if you ever see this.
”
I recently did a modification that would allow multiple rows (horizontal) or multiple columns (vertical scroll). If you would like to take a look at the modification and possibly include it in a release, just send me an email.
Thanks,
Tim
“
Hello. I am using this to display some large images one at a time. I am a little concerned about load times since each image is over 100k and there are over 8 images. Is there any way to get each image to load as it is about to display? So that way it doesn’t try to load them all at one time?
Hello,
I am using this plugin in a tabbed widget and so when the user clicks on a a tab new images are dynamically loaded into the carousel but when I do this the carousel scrolling is not working properly it starts to rock back and forth when click the next or prec button. It works fine for the first tab only. It appears that the left property on the cant seem to locate the proper value. Any help is appreciated.Thanks.
Hello,
I am using this plugin in a tabbed widget and so when the user clicks on a a tab new images are dynamically loaded into the carousel but when I do this the carousel scrolling is not working properly it starts to rock back and forth when click the ‘next’ or ‘prev’ button. It works fine for the first tab only. It appears that the left property on the cant seem to locate the proper value. Any help is appreciated.Thanks.
I’m not sure if this has been discussed or not, but it is not possible to have UL’s and LI’s inside your Carousel due to the way this plugin selects the children elements.
Here is my hack so this plugin with only select the first level of children UL’s and LI’s.
Line: 228
var div = $(this), id = ‘#’ + div.attr(‘id’), ul = $(id + ‘ > ul’), tLi = $(id + ‘ > ul > li’), tl = tLi.size(), v = o.visible;
Line: 236
var li = $(id + ‘ > ul > li’), itemLength = li.size(), curr = o.start;
Great carousel but as a javascript noob I was wondering if anyone can help.
I want the carousel to side a whole (and it’s content) and am unsure about if this is possible and if so what to change.
Hi,
Firsly, thanks for a great, lighweight plugin Ganeshji.
If anyone’s interested, I’ve got a non-circular implementation of jCarousel Lite working in Firefox 2 & 3, Opera 9, Safari 3 and IE6 & 7 with no issues. You can see the code at http://www.markvoss.net/jcarousel/
This is a great carousel but it seem to have a conflict with thickbox.
Is there a way to get the number of the current LI? For instance, if I was on the third LI I could call a variable that would return “3″.
hi – great plugin but i have a problem with ie6.
i have set up the carousel so that when the li is clicked, some content is loaded into a div above – the same with next and previous buttons. my carousel is circular and works fine with ie7 and ff.
i have added a click function to the li
$(‘#Carousel > ul > li’).click(function(){
$curSelection = $(‘#Carousel > ul > li’).index(this);
$(‘#Carousel > ul > li.Selected’).removeClass(‘Selected’);
$(‘#Carousel > ul > li[cid='+ $(this).attr("cid") +']‘).addClass(‘Selected’);
ChangeContent();
go($curSelection – 2);
});
This works ok in ie6 until the first cloned item is clicked (or next/prev buttons reach first cloned item) – the correct li goes to the center of the carousel but the styling is wrong on it and a totally separate li has the .Selected class added to it (ie not the original li or one of its clones).
can anyone help please.
thanks
michelle
@ Doug.S
AFAIK, the current LI is “curr”