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.
Hi! Great work on jCarousellite! However, I have 2 requests:
1) When I hover an element in the carousel the auto movement should pause
2) When I click next or prev the timer should reset. If the timer is 4 seconds and i click next after 3 seconds, the carousel is autoscrolled 1 second after i manually scrolled with the next or prev button.
Big thanks in advance!
Issue:
when using a vertical carousel with image + text in every tag, it base the height of each elements on img height instead of li’s height.
First off… I love the tiny implementation you have here. I use jCarousel for those times I need the full featureset, but your implementation is really nice for being so small!
I am having a slight problem though… Internet Explorer 7 (go figure) is scrolling too much with each click of the next button. The first few images that go by don’t cause too much problem, but as you get going it slowly gets further and further off. Eventually you can see only half of the image you want displayed. Of course this all works fine in FF and Safari. Any thoughts?
Hi – I’m looking for something that will allow me to rotate image maps (I have 3 images with two hotspots each that link to different pages in the site). I wasn’t able to tell from the “mixed content” example if that might be do-able.
Hi, I’m having an issue using HTML elements for items. I have an image above with a rating feature below. I’m using the jquery rating pluging here (http://sandbox.wilstuckey.com/jquery-ratings). My problem lies where the rating buttons display only on the initial page and when clicking the previous button. It shows an empty rating div when I click the next buttons. Currently our development server is down, but I’m happy to provide you a link when it’s up, if you can assist me. I’d appreciate your help. Thank you.
–
Justin
Please provide a demo where in source code of page i will see only the code required to run the demo.
Thnak you,
I would like to create PLAY/PAUSE buttons, to start stop automatic sliding. How can I do this?
Another words, how can I access settings of plugin already initialised?
Eg. I have something like that:
$(“.scroller”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
auto: 5000,
scroll:1,
})
Thanks for all your kind words. I am glad you liked it.
Sorry guys. I didn’t realize that comment moderation was turned on. I remember turning it off. That is the reason why your messages didn’t get posted for this long. I will make sure, this doesn’t happen in the future.
@Ruben – I have received that request from quite a few people. So i will try to squeeze that in as part of the next release. But, feel free to change the code if you can’t wait.
@hartym – I see your point. That is a valid bug. I will try to fix it asap. If you have a fix for it, i would like to see it. Thanks
@John Pendergrast – Yes, you are right. I will try to get that fixed asap, meanwhile, if you have a fix for it, i would love to see it. Thanks.
@Boyink – I am not sure if i understand your question. Since, you are allowed to put anything into jCarouselLite, i guess it most probably should be possible to put the image maps in too. But, if you give a more detailed explanation, i would be glad to help
@Justin – If your problem is not yet solved, email me at ganeshread [at] gmail [dot] com with a link to ur dev server. we can work to resolve it.
@ezbranca – I hear ya… will add it over this weekend. I didn’t add a separate zip file in the first place because, it was a maintenance nightmare everytime i update the plugin. Anyways, now that i have a valid request, i will get to it.
@Mariusz – At this point you wont be able to access the plugin settings from outside the plugin itself. You might have to change the plugin source to get that feature.
Thanks again for all ur patience.
it’s really a great script thank for that!
I have just a suggestion : in the case of circular option to false is it possible to hide the next picture button when the carousel is at his end position and to hide the prev button when it is a the start position
@goetsu – It is already possible. Exactly as u said, when you have circular set to false, and when the carousel reaches the last item, the “next” button will be assigned a class of “disabled”. The same is the case for the “previous” button when you reach the first element in the carousel.
great good news but just one more thing, I think that the disabled class must be added to the prev button at the start because otherwise I have a prev button who is useless
I like your work. Thank for it!
It’s much easier (and reliable) than jCarousel.
But I miss one feature – the possibility to work with huge list of images. In your examples you use very small amount of pictures and it works fast enough. But if you use 100 or 200 images the performance will decrease significantly. So if you managed to implement some callback for loading images and some functionality to manage amount of items in carousel – it would solve the problem with huge arrays and provide us an opportunity to use Ajax for loading of images.
@goetsu – Yes, that is an issue with the current implementation of enable/disable feature. This will be fixed in the next release. You can expect it in a week. In the meantime feel free to mess around with the source urself. I will keep this entry informed about the next release.
@dmitry – I hear ya, but am sorry. Once ajax chips in, or some dynamic addition of carousel items come into picture, there is a big possibility of the code getting bloated. That is why i have purposefully omitted these features. But feel free to play with the source and bend it to ur needs. If you have any questions with the code, i can most definitely help you. In any case, if in near future i am able to manage to code this feature with very less code bloat, i will squeeze it in.
Hi, I’m trying to use jCarouselLite with jQuery 1.1.4 and I’m getting the following error when clicking on the next button:
e[val == "toggle" ? hidden ? "show" : "hide" : val] is not a function
Line 2270 jquery.js
Any ideas?
For the previous comment, I’ve sorted the problem – It’s Rico.js conflicting with something inside jQuery. I’ve binned Rico now to use this plugin and the far superior jQuery. Thanks for the plugin! It’s great!
Hi,
is possible to put images with diferents widths and adjust the space between images?
thanks for the great plugin and sorry for my poor english!
I was wondering if there was any easy way to implement height and width to the carousel box within the current version? If not, would you consider adding such a function to any future versions. I like this a lot since it is small, but yet very beefy, but I’m having a heck of a time trying to resize the box in which the carousel sits. Thanks so much. Keep up the good work!
@Michael Smith – Glad you sorted it out and thanks for the compliments.
@dao – At present it is not possible to put images with different width and height. Technically, it is kinda tricky to get it done. So, i will try to get it out in the next release. Thanks for your patience.
@Aaron – I see your problem. But, for the time being you can use a simple solution maybe. Instead of trying and styling the carousel’s div, why not wrap the carousel’s div within another container and style that container. The plugin code will only deal with styling the carousel’s div. So, a parent container should be free for you to style. Hope that helps.
Hi Ganeshji!
Now, i have a big problem with your jcarousel plugin… i load new content (images) dinamically :
$(document.getElementById(‘ads-caroussel’)).append(“”);
yes, its a dirty code… but the new images do not appear correctly and the sequence is not reloaded.
Its possible to have functions to load dynamically new images and that the sequence was appearing correctly? Ajax? Functions for add and remove images.
Finally, a packed release (js + docs + examples) is welcome, normally I work offline.
Thanks for all!!!
@dao – Sorry dao, but you can’t load images dynamically with this plugin. This plugin is intended to be very light-weight, so some of the features that compromises that fact are not included. But, the feature that you are looking for is readily available in a more complete carousel plugin called jCarousel. http://sorgalla.com/projects/jcarousel/
I am using this plugin primarily to make a dynamic header image that has image and non-image content. So I switch between main, archives, etc. (see site).
The problem that I have run into is that, for example, my archives section should have a list of months in the archive (another ul). When I do this, the plugin is picking it up as another item to be scrolled, when it should be considered part of the “non-image” content.
So say I have 3 items in my jcarousellite. I can scroll through them fine. On the third in addition to an image, I overlay a div that contains an unordered list. I would expect still 3 itmes, 2 images to be scrolled, and the 3rd an image with a div on top of it containing a list. However, what happens is that you get 3 items + the amount of items in your own list in the 3rd item.
I suspect its because the plugin is parsing based on li. I am not particularly a programmer, so I have not looked hard into tweaking it myself.
Basic question, can we have a list within a div as a non-image content item within a jcarousel lite gallery?
jq1.2?
Please update to 1.2
I am using jCarousel Lite on a new website and it works great. Thanks for the plugin. One question I have is that on some browsers [Safari, IE7] the thumbnail list shows briefly in a vertical orientation as the page/plugin loads. The carousel is set to display horizontally. I assume that the CSS loads first and then the plugin rewrites it but is there a way of removing or not displaying this temporary vertical display? I hope I have explained this correctly. This is not the temporary flicker effect you mention on the FAQs page but please correct me if I am wrong. Thanks for any input.
First off let me say that this script has been a real life saver and is fantastically written. Really a great job. I just had one question however: Once the carousel has been generated and is running etc, is there any way to change any of the basic variables on the fly (for example the scroll number)? Perhaps I’m missing something obvious
Hi,
Animation does not work. Firebug says: “tLi.gt is not a function”. I’ve tried jCarousel Lite with jQuery 1.1.4 and 1.2.
Thanks,
Matt
@clive – As far as i know, the temporary vertical display should be because of the flicker effect i explain in the FAQ. To be confident in this, check the project page for jCarouselLite and see if you can reproduce the problem there. If it works fine in the project’s demo pages, i guess the the FAQ should solve the problem. Let me know if you are still facing it, we will try and fix it together.
@Mo – At present, this plugin does not allow you to change the variables like “scroll” etc on the fly. I will note this as a feature request for my next release. Thanks for your inputs and sorry for any inconvenience caused because of this missing feature.
@foo, @chad, @matt – 1.1.3.1 was the last jquery version i tested this plugin with. I will make sure i will update the code to support 1.2 pretty soon. But, at present, i am pressed for time, so, i can’t provide any timelines. Rest assured, it will happen soon, and i will have a blog entry posted for the same.
Thanks Ganeshji. I tried the flicker effect fix as described in your FAQs and the vertical effect has gone. Thanks! I am still working on the website but when it is ready for viewing I will post it here for feedback.
Hello,
I implemented this great plugin in a client’s site but I have a strange issue in IE6 (Firefox and IE7 is ok). The plugin is scrolling automatically, with “scroll:2″ and 3 images showing per time… but there’s a image that is only showing when the animation begins. This image is the third in the list (of 8). And this is happening after rotating all the images.
Thanks for the plugin!
@Clive – Glad it worked out for you. I am anxious to see where and how it is used in live sites. So, i am glad that you are going to post a live link as feedback.
@Marco – If i understand right, you are saying that the third image is not loading for a long time. Since you are initializing the plugin in document.ready() event which gets executed before the images are downloaded, possibility of this happening are high if the image size is large. So, why dont u try and initialize the plugin on window.load event. That could be the solution. Lemme know if it worked out for you.
Hello Ganeshji! Well, not really.. The third image is appearing when the page loads. But, when starts rotating until the last image from gallery, then the third image doesn’t appear anymore (but the first and second image are showing). And so, when starts the animation again, the third image appears.
Look here: http://www.multiperfil.com.br/index01.php
At the bottom, wait until all images of the gallery and then you will see whats happening with the third image, the Drywall logo (after CSN).
This is happening only in IE6.
Thanks! =)
i used it here : http://www.deviantnation.com/girls/Miesha/ on the left under “6 Photo sets”.
Anxious to get it compatible with 1.2 so I can update some other jquery stuff
I’m working on an implementation of jCarousel here: http://tabl-ex.com/index2.php
Still got _quite_ a bit of work left, but so far so good.
The challenge I’m having is that, on occasion, when refreshing the page and testing the “prev” or “next” buttons or the mouseWheel, it will scroll extremely fast and scroll till everything goes black. I haven’t pinpointed what’s causing this just yet but it “seems” to be random.
Try refreshing a couple of times and testing. Any ideas?
Thanks for an awesome plugin. I’m looking forward to running it on 1.2
.
This is great, thank you!
I do have a question about the callback function. If I had one section visible how would I access the content of that returned object? Say I needed to get the id of a div in the displayed item in the carousel?
Hey Ganeshji,
I was wondering if this plugin is compatible with jquery 1.2.* yet? It used to work great for jqeury
Hey – Your plugin looks great. Unfortunately, I’m too stupid to make it work apparently. I’ve copied word for word the “3 step installation instructions” but when I render my page, its just an unformatted list of imgs.
Google says there is some compatibility issues with the latest version of jquery and carousel, but I copied and pasted the exact versions running on your site. Still to no avail. What am I doing so wrong? I’d love to implement this.
If you would be so kind as to email me, I would really appreciate it.
Hello,
I found that the carousel doesn’t work if the css direction is set to “rtl”. It shows off-screen or has wierd jumps. I don’t mind setting it to “ltr”, but I also want to scroll in the other direction (I use auto-scrolling).
Hi
I’m trying to use your carousel so that it displays over 2 or 3 lines, so that I can display 30 images at the same time using an external control so that when you select button 1 it puts image one in the first placeholder etc. Any ideas how to do this easily?
This small (and probably very dirty) correction fixed the plugin for me on jQuery 1.2.1. However it will only fix the thing when using a non-circular vanilla version. When you use circular, it WILL screw up. Suited my needs though (tested with 8 images).
Change line 230 of the unpacked version to:
ul.prepend($(‘#’+$(this).attr(‘id’)+’ ul li:gt(‘+(tl-v-2)+’)').clone()).append($(‘#’+$(this).attr(‘id’)+’ ul li:lt(‘+(v)+’)').clone());
Namasthe Ganeshji,
First of all, GREAT Plugin!, Its really easy and it has a lot of nice effects too. The only thing I really miss is, that the image can not be loaded on need. Example: I will have a gallery with at least 50 pics and I want the image to be loaded only if you slide trough.
I know that you will advise me to use the jCarousel. (http://sorgalla.com/projects/jcarousel/) But I like yours more because of the simple HTML and simple CSS.
The following patch should modify jCarousellite to run with jQuery 1.2.0 and greater. The issue, as far as I could tell is due to the use of lt() and gt(), which were deprecated in 1.1.4 and removed in 1.2.0 in favor of slice().
Here’s the patch:
— Desktop/jquery.jcarousellite.js 2007-10-10 14:58:13.000000000 -0400
+++ Sites/higherthings.org-trunk/HTDB2/javascript/jquery.jcarousellite.js 2007-10-10 14:56:51.000000000 -0400
@@ -227,7 +227,7 @@
var div = $(this), ul = $(“ul”, div), tLi = $(“li”, ul), tl = tLi.size(), v = o.visible;
if(o.circular) {
- ul.prepend(tLi.gt(tl-v-1).clone()).append(tLi.lt(v).clone());
+ ul.prepend( tLi.slice(tl-v-1).clone() ).append( tLi.slice(0,v).clone() );
o.start += v;
}
@@ -289,7 +289,7 @@
}, o.auto+o.speed);
function vis() {
- return li.gt(curr-1).lt(v);
+ return li.slice(curr-1).slice(0,v);
};
function go(to) {
Hi – Please forgive my naiveté, I’m not a javascript programmer, but I love the carousel and am trying to add it to my site. I’ve got the js files & head tags & and all in the right places; I just don’t understand how to fire a call to the plugin. I know! Idiot-stuff! Please help me anyway! What is the syntax in HTML to run the script when the page loads? A million thanks – reading JavaScript tutorials has only confused me further. I’ve got my forehead on the floor…
-Erin
Hi there,
Nice work on this one mate.
I was wondering if anyone had any ideas on getting a flexible width carousel that only fits in as many items as can fit.
For example, I have a fluid design, and would like people with higher resolutions to see more items in the carousel since they have the room.
Look forward to any suggestions.
Cheers,
Kim
Hi
Great plugin you made Ganeshji.
When you will be released zip version of all demo sites.
This will be great help for all us newbies?
cheers
@ Stan – thanks so much for the patch!