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,
Sorry to say I don’t get the jCarousel Lite to work – at all.
I have studied some other implementations and of course the Demo part here. But no. I’ve got to bee the most helpless JS person ever.
I made a testpage and this is all of the code on the page:
$(function() {
$(“.auto .jCarouselLite”).jCarouselLite({
auto: 800,
speed: 1000
});
});
The page can be viewed here: http://www.kompetansetjenester.no/jclite.php
Can anyone help me out??
Svein
Well, that was not ALL the code of course. You kan view the source code at my test-page.
Svein
Nice plugin. Well done!
What I’m missing is the ability to further interact with the carousel. For my use case, when the mouse is over the carousel, the animation should stop, and start again when the user hovers out.
I’ve adjusted my local copy accordingly, no problem, but if it does not exceed the scope of your project, then I would like to see such an enhancement in a future version. It’s just a few lines of code. I could send you my copy if you mind. It’s no fully generic solution, but may serve as a basis. Thanks.
Cheers,
hi,
is there a change in the jcarousel to call the go function with javascript. eg i have 10 and i want to jump to number 6. How do I call the go(6) function or is there no way to do this.
thanks Smee Again
Hello,
I have a problem with this and I have double-checked my query, so I know it’s not the code. Basically, the carousel seems to double images when selecting them from a database, otherwise it works fine.
This is what I’m doing:
echo “”;
while(mysql_num_rows($r) && $row=mysql_fetch_array($r))
{
echo ““;
echo ““;
echo “”;
}
echo “”;
Great stuff! Far better than the “normal” jQuery carousel. Could be better though. Which is what I did: I added a few small things to expand its possibilities and removed a small (in my eyes) bug. Here’s an example: http://ezcompany.cms.ezcompany.nl/software-ontwikkeling
I added the fade effect (no sliding horizontally or vertically, but fading in/out on top of each other). The “bug” I fixed is the timer/interval that resets every time you click a control (yours didn’t reset, that’s weird behaviour).
Do with it what you want. Thanks for the plugin!!
Hi,
nice plugin. But even your demo for verical:true is not working right on yor site with IE. Please fix.
I want to create a carousel to display logos, each one having a different width. So each element in the carousel would have a variable width, but could be defined in the attributes.
The problem I am having with this plugin is that it displays a specific number of elements, while I need it to display as many as will fit… and possibly cut off the last one if it needs to. But right now I have to define a specific number and this just doesn’t work for anything other than fixed width elements.
Do you see any way around this?
Okay, I went ahead and tried it out and got it worked pretty good.
But I have found an issue. I want to display fractional items, and use circular: true. When I do this, and set visible to 3.5 it shows 2 full and then 2 partial.
I have seen many others on this blog post mention this.
A semi work-around is to use start: .5 but once you cycle through all the images once or twice, it gets out of alignment and starts showing 2 partials again.
Could this issue please be fixed? We need to use fractional numbers for visible with circular: true.
Thanks for your work. The plugin is great.
First off, thanks! This is a great plugin!
Maybe I’m just missing this but here’s my request. I have a horizontal slider with a width of 1 and set to auto-scroll. When I have only one item in the list, it still scrolls. Can it be set to not scroll when the list has only one element?
Thanks again!
Ok, while I’m looking that gift horse in the mouth, I might as well ask for one more feature.
Pause-on-roll-over would be really nice.
Thanks again!!!!
Hello,
I just implemented something with your excellent carousel. My problem was that I would like to add/remove some images dynamically. First I empty the #carousel_ul, then, add some But the problem was that if I already initialized the carousel, all btn actions where executed several times (next -> next …)
So I added an attribute to “this” and check if this attribute was initialized. if not, all button and mouse are initialized, if not all this block is not executed.
I can give you the example if you want.
Thanks for you script.
FKL
———-on version 1.0.1—–
added on line 254 :
if ( $(this).attr(‘initialized’) == null ) {
$(this).attr(‘initialized’, true) ;
added on line 285 :
}
———
Hi Ganeshji,
it looks like the perfect gallery to me – I’m impressed that anyone can write code like that
But I’m having some trouble making your “Custom Widget” work, and I can see that others has asked you for a code-example (but couldn’t seem to find an answer from you, even though I scrolled through all of the comments).
Therefore I ask again, can you please provide me (and others) with an example-page, that is not hidden as an included file on yout site?
And while I’m here, is it possible to include some sort of a caption area. I ask because I need to overlay the large image with a headline, description and a link?
Thanks in advance & keep up the fantastic work
)
Hi Ganeshji,
My problem is external controls. I’m click 14th item and sometimes next item appears. So if I click external item auto timer will be reset.
Hi,
when i try to setting multiple jcarousel in my project it display error in Firefox Error Console ..
`Error: el[0] is undefined
Source File: http://kingkoil/_js/jcarousellite_1.0.1.js
Line: 338
How to solve that problem?
thanks and regards
Hello, Good work
I think you can add the properties border-top-height, border-bottom-height , and border-bottom-width, border-top-width to your functions height(el) and width(el).
I’m integrating jcarousel lite to mount a carousel for videos.
My question is how can I add the option for superior view (bigger screem) like in your demo (Custom Widget).
http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo (custom widget)
Thanks
Hi Ganeshji,
Your plugin is very nice, I have used it almost successfully in a couple of projects, but I’m almost sure I’ve found a couple of bugs too.
First one is the unability to get the plugin to work properly with Chrome under some circumstances. Anyway, this is something I need to check a bit more.
The second one I’m pretty big is a bug. If I have a caroussel with just one image and the carousel is set with the “circular” parameter to “true”, the image won’t display.
As I’m not JavaScript gifted, I haven’t been able to fix this behaviour in your plugin, but I’ve got a workaround by simply disabling the “circular” if number of pictures is less than 2:
var picturecount = 1; // you can determine this with PHP if pictures are coming from a database, etc
And then:
$(‘.carrusel’).jCarouselLite({
circular: (picturecount>1?true:false)
});
Hope this helps someone in the same situation as me.
Greetings!
Hi Ganeshji,
i have one problem here, I’m using dynamic, some time is only 1 or 2 images.
with 2 images is only going to the same image.
waiting for solution.
thx.
There is a bug in your navigation logic, when circular is false.
To fix it, change (~line 289):
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.
Into:
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 (to itemLength – v) {
// Go to last element minus visible.
curr = Math.ceil(itemLength – v);
} else {
curr = to;
}
}
Hi, great plugin.
It’s possible to have 3 picture displayed verticaly but to slide horizontaly?
I have 9 pictures (or more but allways in increment of 3) and I want to display on one side 3 pictures one below to other and to slide horizontaly to display the second 3 then the last 3 and then in circular.
Hi,
I tried this:
jQuery(function() {
jQuery(“.selected_slide”).jCarouselLite({
speed: 1000,
visible: 1,
auto: 2000
});
});
It just shows 4 flashes and then together they move. Does it work for swf too?
It just shows 4 flashes and then together they move. Does it work for swf too?
(div class=”slide”)
(ul)
(li)(embed src=”video1.swf” width=”240″ height=”115″ )(-embed)(-li)
(li)(embed src=”video1.swf” width=”240″ height=”115″ )(-embed)(-li)
(-ul)
In addition to what Josh Naro said, it is not enough to just check for circular at line 230 and 288. The number of images (tLi.size()) may be less than o.visible when the list is dynamically generated. Another check should be added:
@@ -229,4 +229,4 @@
- if(o.circular && tl > v) {
- ul.prepend(tLi.slice(tl-v).clone())
+ if(o.circular) {
+ ul.prepend(tLi.slice(tl-v-1+1).clone())
@@ -288,3 +288,3 @@
- if(o.circular && tl > v) {
+ if(o.circular) {
hi
I have used this plugin in my website .It’s very nice plugin .i am glad to used this .but i have been facing one problem on it i have used div on that and used some jQuery function on that .But jQuery fucntion not working on that .Please let me know why this problem .
Thanks in advance
Deepak
Hello,
I found around a JCarousel Lite version called jcarousellite_1.0.1c4.js, that seems to have a better support for things like stopping on mouse over, auto start/stop, etc.
Is this an official version? If yes, please can you provide updated links at the download page?
Thanks
JCarousel Lite feature request: I’d like to display all my images in 2 x 5 rows (or perhaps 3 x3), and have the images rotate clockwise or anti-clockwise around the rectangle of images.
Is there a way we could set the start parameter dynamically? Something like, start: $(“.resultsCar li”).size() – 2
Because, the list item size will very dynamically based on my constraints and I want to show the last 3 items first with the left arrow enabled at first and right arrow locked (the exact opposite of the way we show the list now)..
Eg: Say the below are the list items that I show
11/11, 11/12, 11/13, 11/14, 11/15, 11/16, 11/17, 11/18
Currently by default we show 11/11, 11/12, 11/13 with right arrow enabled to see others. What I want is by default I need to show
11/16, 11/17, 11/18 with left arrow enabled to show the previous items.. Is this possible?
How do you alter the spacing between the images?
How do I make the arrows appear on the sides rather than sit on top? I want the left arrow on the left side of the images and the right arrow on the right side of the images.
Hi,
Your plug-in is really awesome! I hope you could add more features on this!
Just one question… How do I get the index of the ’shown’ item? I’m using your plug-in as a pagination for registration ’steps’ on a project I’m doing. And I hope to know which ‘page’(or step) is active.
I’m really new to jQuery and I hope you can help me.
Thanks in advance!
Hi thanks for this! Jst one prob I cnt get the easing effect to work though. got the plugin from http://gsgd.co.uk/sandbox/jquery/easing/ but didnt work
any suggestions?
Hey bro, I have few questions on this. Let me know, if you are available on Gtalk or Skype, so that we can discuss a bit.
Thanks..
Thanks for this script, it’s amazing; elegant and slim.
I have an issue with one instance of the script using the thickbox class on my links.
When the carousel is generated the first time, it works great, but when circular = “true”, the thickbox does not render correctly on subsequent turns. *in addition, if you go “previous” after loading the first time, thickbox class doesn’t render correctly either.
has anyone else experienced this before?
i have been able to successfully render jquery.reflection with the images… it looks great.
you can see the sample here:
http://provincetownarts.org/main/test.php
thnx, and look forward to your comments.
Hello,
Thanks for this script, maybe it’s bin asked before but can I use a carousel in an other carousel?
Thanks in advance
For anyone interested. I modified the script from http://www.erikhobbie.com/technology/jquery-auto-slideshow-with-pause-feature/ to include some code to automatically highlight the external control button the corresponds to the current slide being displayed by adding and removing the class named “activeExtCtrl”. I’m sure some modifications will be needed to make it work, but it’s a good start.
My script can be found here: http://jbarlow-design.com/guest/jcarousellite_pausation_ctrlhighlight.js
Superb plug-in, thank you!
Would like to know if it is possible (couldn’t do it!) that in auto scroll mode for pictures (auto:800, speed:800 for example), a mouseover *stops* the scroll.
Currently when using mousewheel, in autoscroll, we can make scrolling faster in both ways using the mouse, but it is not possible to STOP the scrolling. Or did I miss something?
Thank you!
Thanks for the awesome plugin! I’ve found it much easier to work with than jcarousel.
It would be great if the previous button had the disabled class on initialization when circular is disabled. it would also be nice if you could apply the disabled class to both buttons if the total number of items is less than or equal to the value you set for ‘visible.’ Fortunately jquery makes it really easy to add in this functionality, but it would be great if it was built into the plugin.
Hey, thanks for the plugin, it’s really nice but I have a small problem…
I have 3 images and I want the image in the middle to be a bit bigger than the other 2 and it should be over the other 2 (if you don’t unterstand what I can send you a screenshot or look at http://www.jamieoliver.com/recipes) but the image to the right is over the middle one and I don’t know how to change this behaviour.
Thanks for your help!
What about lazy load for carousel? Wouldn’t it be nice to integrate lazy load functionality to jCarousel? Thanks for the plugin by the way.
How can I add a second carousel on the same page?
I tried making instances but when I click the next button the 2 carousels work at the same time.
PLEASE HELP!!
Hi Ganeshji!
I’ve found your plug-ins a very handy tool! However, I’ve noticed when a combination of images and youtube were the contents, the youtube images will appear… and somehow it doesn’t work harmoniously on IE 6.
But still your works help me a lot and I bookmark it for some future patches and updates! Keep up the Good works!
What an awesome plugin! I really love this plugin.
—
@#688. Richard and the others,
I experienced the same problem with fancybox!
This is what I did to solve this problem:
- Put your entire “$(document).ready(function()” code at the bottom/footer of your HTML code, @Richard in your case:
$(document).ready(function() {
$(“.widget_style”).jCarouselLite({
btnPrev: “.previous”,
btnNext: “.next”,
/*this makes it a true carousel rather than a slideshow*/
circular: true,
visible:5,
scroll:1
});
});
This should do the trick, it worked well for the fancybox and hopefully thickbox, lightbox, etc. aswell!
Good luck
Gr. Kai
I was in need for “pause on hover” too and got it with a few additional lines of code in jcarousellite.js file.
Add this in the beginning of the code into the list of options (after “auto: null,”):
pause: false,
Change this in “if(o.auto)” part:
if(o.auto)
aktiv = setInterval(function() {
Add this before “function vis()”:
if(o.pause) div.mouseover(function()
{
clearInterval(aktiv);
});
div.mouseout(function()
{
aktiv = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
});
In your Call (at the beginning of the HTML file) set it like this:
auto: 800,
speed: 1000,
pause: true
See the live example here:
http://kg3.de/deponiecache/carouseltest.html
and the changed script here:
http://kg3.de/deponiecache/js/jcarousellite.js
Tested with Firefox 3.x and IE8
No guarantee & support
Karin
Fantastic plugin!
I just have one issue – I want my horizontal carousel to be of a fixed width to fit in with my site layout.
When I don’t provide it with enough items to fill it up then it sets the width style of the enclosing element to be the minimum necessary to display my items.
Is there a way to disable this functionality so that I retain control of how wide my carousel is?
Thanks,
Simon
hello!
how to add 3 rows and 3 columns Carousel?
Hi! Thanks for great and lite plug-in!
I see that you have a function for callbacks, for before and after the action of “carouseling”. But, I am looking for a function that will generate a callback for when the carousel has reached the end (it has to be a non-circular carousel, of course). Is there such a thing?
Hi
I used the jcarousel but it is not working in IE6.
$(function() {
$(“#myclass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
I can’t seem to get this working on classic ASP page.