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.
Hey!
The Carousel is working now, but i have another Problem:
IE just shows one Horizontal and one Vertical on one Page – instead of 3 Horizontal and 1 Vertical – check out @
http://projects.4yourideas.de/werbelayer/demo.html
So what’s the problem for now?
In Firefox all is okay! All 4 are shown correctly!
Hello.
I have a question regarding jCarousel.
Can this carousel be structered on 2 lines?
For example, 2 columns and 2 rows per area.
Thank you,
AB.
Can I specify my own thumbnail files for the plugin rather than letting the plugin generate thumbs (data is already on hand and this will save processor time)?
I’m sure this question has been answered elsewhere — but I can’t seem to find the right thread.
Thanks in advance –
Hi,
I’m working with your carousel and so far it has been great. But I’ve tried to use a lightbox on the images (http://leandrovieira.com/projects/jquery/lightbox/) and I can only get one of the 2 working but not the carousel and the lightbox together. Do you have any idea why that would be? Thanks a lot for your help!
Ganeshji,
This is a cool and easy to use utility. I do have one problem though. When I try and use the carousel and Lightwindow 2.0 on the same page, I can only get one to work (the last set of includes). Any advise on what I need to do to get both working?
Hi,
As i cold see, it’s possible to use 3 carousel in the same page. But can one of them use 3 images at time and others use just 2 images visible ?? What do I have to do to use just 2 images on the carrosel ??
thank you for this nice jQuery plugin.
I duplicate the file and change the function name to “jCarouselLite2″ on the second script. Them I change the value of “visible:” to “2″. It’s working now, but I have two “almost the same” script linked to the sema page. It would be nice if we could choose the number of visible picture for each carrosel. I reaaly don’t know how to do that, but could be something on the “plugin call”.
Thank you and sorry about my english.
@Saulo Padilha #407: You don’t have to duplicate the source files to achieve this. All you to do is, give your carousels different IDs. Eg: lets assume the “div” for the first carousel has an id of “carousel_1″ and for the second carousel “carousel_2″. If you want 3 images visible in the first carousel and only 2 images visible in the 2nd carousel, you have to call the jCarouselLite plugin 2 times. Something like this…
$(“#carousel_1″).jCarouselLite({ visible: 3});
$(“#carousel_2″).jCarouselLite({ visible: 2});
Ofcourse, you shud include other options that tells the carousel which buttons to use as next and previous for example.
@Vinod #405: What error do you get.
@Delphine #404: What error do you get.
@Chad #403: The carousel script does not create thumnails at all. It just displayes whatever you give in the carousel “li” in the form of a carousel. Thats all
@AB #402: Unfortunately no.
@Mikhail #400: Thanks Mikhail for the suggestion. At the same time, I guess some fellow jCarouselLite users have also found the same bug and have suggested solution in the comments section if i remember right. Try checking it out, you might come across a solution.
When i try visible of 4 instead of the default 3 and click the Right arrow the images zooms past real fast and dissapear. If i click the left arrow then it functions fine. It is only when i first click the right arrow. here is my code.
$(function() {
$(“.anyClass2″).jCarouselLite({
btnNext: “.next2″,
btnPrev: “.prev2″,
visible: “4″
});
});
Whoops sorry ignore that last post. I had the integer in double quotes.
Another question.
I fixed by code, but when there is only one image it does not display it. Hopefully the code below will format out on the post.
$(“.anyClass1″).jCarouselLite({
btnNext: “.next1″,
btnPrev: “.prev1″,
visible: 4
});
@Chad #410: I guess, the plugin looks for a minimum of “visible” elements to function properly. But anyways, what would you want displayed in the other 3 slots if visible:4 is given and you provide only 1 image in the “li”
The Carousel works great in Firefox, but now it doesn’t work in Internet Explorer 7. Can anyone help me out here, I’ve been struggling with this for hours now with now luck.
You can check out a test page at http://www.signbreak.com/sb6
Thanks in advance for any help.
I’d like to be able to create external tab-buttons that control the slides like http://www.panic.com/coda/ — but most importantly, I’d like the active button to remain indicated, so the user knows which slide he/she is on.
Is this possible using jcarousellite?
@Mike #412: Everything seems to work perfectly when I look at it. Maybe u fixed it already.
@Elena #413: I understand your requirement. This is not built into the carousel itself as a feature per-se. But you will be able to achieve the same result if you write appropriate code in the provided callback methods. Best of luck.
hello Ganeshji,
sorry for the repost, but I need this quite urgent for my project.
is there a way to show an image counter that would automaticly
display something like this: 1 of 10, 2 of 10 and so on depending on how many images you have in your list?
thanx a lot in advance!
@solneman #415: The solution to your requirement is very simple. All you have to do is to maintain a counter variable. Attach click events to both your “next” and “prev” buttons. On every click on the “next” button increment the counter by 1. On every click on the “prev” button decrement the counter by 1. Now, this counter variable will always hold the exact index of the carousel item that is being displayed. Now, while passing your options object to the jCarouselLite plugin pass in a callback function for the afterComplete() method. In this after complete method display the counter variable’s value. That solves your issue.
hello Ganeshji,
I’m working on a new website. I’ve serious problem with Carousel – it works fine in IE7 but in FF 3.0.10 images are not working properly: FF thinks as if there were 4 images (the last one is empty) and there is little line on the left (some rubbish from a previous image). Another problem is with IE6 – it’s not displaying overlay with text lines.
Pls take a look at: http://www.tech.waw.pl/infotex/
I’m using jquery.min (v1.3.2) and the latest carousel.
Best Regards,
Jacek
Hi,
Great plugin, but can this be updated so the images move based on the mouse position?
For example:
If I roll my mouse near the left of the gallery then the images move left (rather than clicking the ‘left’ button) and if I roll my mouse near the left of the gallery then the images move left (rather than clicking the ‘right’ button). And finally, if the mouse is resting in the center of the gallery then no movement takes place.
If this can be done that would be brilliant as it would be a much easier alternative to having to use Flash!
Thanks.
Kind regards,
Mark
thank you for this nice jQuery plug-in.
Let me first say that I love this carousel!!
However, I am having some trouble. I would like to use the image slider, have it auto scroll, and pause if I hover over the images…
I know this should be possible (maybe not pause on hover, but I hope so). I have no idea how to merge all of these functions together and where to put them…
Any help would be great!!! Thanks
@Jacek : I have never test jCarouselLite with jquery 1.3.2. So, I strongly suggest you to try and see if it works with jquery 1.2.6. If it does, there definitely is a compatibility issue. Please let me know of the same, and i will try and get a 1.3.2 version upgrade as soon as possible.
@Mark McDonnell #418: Ofcourse it can done. Just that it is very time consuming and i am totally occupied to get to new features right now. Anyways, that is a very nice idea and I will give it a try when I can squeeze out some free time.
@Gregory: You are making me feel bad that I have not put together a zip file with the demo pages so that it will be easy to download and use. I promise, that I will do it within a week, but in the meantime please view my webpage source and you should be able to figure things out.
I’ve installed version 1.2.6 and problem hasn’t disapeared! So, I think it’s not the compatibility problem. Maybe css (I mean css hacks were neccesary) – for example text overlay is made differently in FF (position: relative;top:-130px; …) and in IE (margin: -130px;…).
Jacek
I have this problem, I am just a regular guy using my laptop and all the suden I have been getting this error message:
“Jcarousel: No width/height set for items. This will cause an infinite loop. Aborting …”.
I don’t know why. I also get a pop up window asking if I want to navigate away from this site and finally every now and then I hear tv or radio programing voices as if I would be in a tv website or radio website but there are no webpage open. then stops after a couple of minutes. Can anyone help me get rid of this pop ups and this gost webpage from loading?? Thank you
@Ganeshji thanks for the response!! Through trial and error, I ended up figuring out everything I wanted except for one thing. I seem to be having the flickering problem stated in the “known issues.” I added the css class, but I might not be putting it in the right place. I’m replacing the “anyClass”… is this what I’m supposed to do?
Never mind, I fixed it…
@Jacek #422: Maybe it is the CSS problem. Let me know once you have solved the issue.
@Jaim #423: jCarousel is another plugin for jquery. jCarouselLite is a totally different plugin. For jCarousel’s info check out this website. http://sorgalla.com/projects/jcarousel/
@Gregory #425: Glad you are getting things together. Thanks for choosing jCarouselLite.
hi, the plugin is great,
but there is a problem,
is it possible to set different height for each li.
currently it is calculated automatically.
please urgent
@sabari #427: Sorry, the plugin calculates the height automatically based on the height of the first “li”. The basic assumption here is that most carousels have items of equal width and height. In any case, I am able to understand if you had a requirement to display items of different width within the carousel, but I am unable to understand the use-case behind different heights. In case your use-case is valid also, it is currently not possible. But one thing is possible. If your carousel items are getting hidden because the height is short, try placing the tallest item as your first “li”. Things should look good then.
Hello,
Currently the button functions are disabled when the animation is running.
function go(to){if (!running) {
I’m wondering, is it possible to modify the code so the button will work to “speed-up” the scroll when clicked on running animation.
Something like this: http://www.cirquedusoleil.com/en/ (the What’s New part, and yes they’re not using jCarousel Lite.
Thank you.
Let me rephrase the question
… or will it make is no longer “Lite”?
I’m asking to you because you’ll have the best POV as the creator.
Thank you!
hii
thanks for neat plugin
i have question: is it possible in some way to always start with the same image .. am using it in a wordpress blog but everytime it lands on a new image.
do you think, its a wordpress issue that i need to explicitly say to show the most recent image/post
or can it be adjusted in carousel plugin
thanks a mill.
Mo.
@Azza #430: Technically speaking, there shouldn’t be much of a change in the plugin code to enable the effect you are talking about. Remove the condition and the boolean variable and check if it works fine. I doubt it. You may face an issue or two. But they will be simple enuf to solve. To conclude, yes it can be done by playing with the source code and it wont affect the size of the plugin.
@mohans #431: It is most definitely an issue with how you are using wordpress. The carousel itself just displays what is in the first “li” as the first element, unless you specify another “li” to start with. Hope that helps.
Hello,
Thank you for the comment.
I’ve actually tried removing the conditional statement. It works, but it simply “queue” the animation process’ (not “speeding”/”forwarding” the slideshow).
I’ll try to work it out, let’s see how simple it might be.
Thanks again!
And forgot to say this earlier, thank you for the lite but great plugin.
Great plugin, thanks!
One question, is it possible to have external controls to a vertical carousel? I can´t get it to work.
Working on a site using this.
It works great in browser as-is, but when I implemented it on the site I am using it for, it seems that I messed something up, and now it is not displaying correctly in IE 7.0
Do you think you could give me some pointers on this if you have the time?
http://www.thebloomagency.com/staging/bloom
Thanks!
Guess it would help to describe the issue
The display is fine in IE 7.0, but the animation does not work. Works fine in all other browsers, of course.
Fixed! Thanks anyway!
Grrr…nevermind, it wasn’t fixed, I was looking in the wrong browser…
Any insight you can lend would be awesome.
Thanks!
@Azza #433: Thank you for using jCarouselLite.
@Jocke #434: Ofcourse it is possible. What error are you getting? Can you provide me a link where I can see it?
I am getting a javascript error in IE7 PLUS I guess you are using a different library. So, cant help there Sorry…
Hi, the plugin is really great!
But I’ve found something strange: I’m using jquery UI tabs in my web. There’s always exactly two tabs on the page, and each tab has its own carousel. When entering the page, the carousel on the first tab (the selected one by default) looks great. But when I change to the second tab, the carousel there is not visible. AND what’s worst: if I swith back to the first tab, the carousel is invisible there again, with no way of showing it again.
Is this a known limitation? Looking at the generated HTML, the ul has a very narrow width, and all the li’s have 0px width.
Thanks for your help!!
Aloha Ganeshji,
I like your plugin and use it for a while and for seperate websites.
Without problems.
But now I’ve got a problem:
$(‘.exampleClass’).click(function(){
// Do something
});
.exampleClass is inside the scrolled list elements.
If I load that page every thumb is clickable, but after scrolling the carousel click handler is lost and doesn’t work any longer.
This problem is a problem on FF3, FF2, IE7 and even Safari.
I would be happy, if you have any suggestions that solve the problem.
Thanx for the plugin and greetings from Berlin,
- Till -
Hi Ganeshji,
just wanted to thank you for the great plugin!
here is the site it’s used on
http://www.visionandphotography.com
is there a way to keep track of the thumbnail being viewed when they are clicked on? instead of having them reset everytime, it would be great to keep track of them….
thanks!
pvf
Does anyone have an example of the Custom widget? I have Jcarousel lite working perfectly but cannot call the main image when clicking on an image. I am assuming there must be a missing div tag call where the image should be dsiplayed but have, yet, to succed in replicating the widget. Awesome script, plain html working demos would be an added bonus
@Nacho #442: I have used jCarouselLite myself with jQuery tabs with no problem. In fact, on this website itself, the project page uses the tabs plugin from the same author before it was absorbed into UI tabs. So, I dont think that should be a problem. Just to get closer to the issue, try using the same author’s older tabs plugin and see if it is working fine there. Here goes the link for the older version of tabs – http://www.stilbuero.de/2007/04/07/tabs-27-flexibility/
@Till #443: Oops! I haven’t tried binding any events to the carousel items. I don’t clone the given items in anyway for the events to get lost except when the carousel is in “circular” mode. Fortunately or Unfortunately, that is the default mode.
Try this. Goto the line of code in the carousel source given below
if(o.circular) { ul.prepend(tLi.slice(tl-v-1+1).clone()) .append(tLi.slice(0,v).clone()); o.start += v; }Here, replace the clone() method calls with clone(true) method calls and see if things work out for you.
@pvf #444: Yes of course it is possible in your programming logic. Not in the carousel. You know which carousel item is being clicked. You could have some metadata within the carousel item which implicitly tells you its count within the carousel. You can store this count somewhere and when you initialize the carousel next time, you can “start” it with this count. Hope that helped.
@Ted #445: A test page where I can look at the issue will be great for debugging.
I’m using the jCarouselLite module for a Drupal website and I have two questions for you.
- Is there a way to eliminate the pausing when using auto scroll?
- I am using thumbnail images with a uniform height, but with varying widths. The module allocates the same space for each image display. How can I get each image to display neatly when they have variable widths?
Thanks,
Tim