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 Ganeshji,
thanks for the fast response!
would you mind pointing me in the right direction for this to be coded?
i am familiar with jquery but not an expert! any help would be appreciated.
i was thinking of storing the clicks using a .click(function)
like:
$(‘li a.carouselImg’).click(function(){
//store values here
})
but im not 100% sure how to approach it….
thanks,
pvf
@Tim #450: No, the way the plugin works atleast right now, it is not possible to eliminate the pausing during auto scroll. I myself am looking to change that behavior for one of my clients. So, when i succeed, i will keep this blog updated.
At present the plugin assumes that all items are of equal height and width. You know typically carousel items are like that. Just place your largest item in the front of the carousel so that all carousel item gets the maximum width. This should solve your problem temporarily
Hey Ganeshji,
thank you for fast answering.
Yet I didn´t try your solution, but found another one:
I´ve used the callback function:
function initClicker() {
$(‘.Something’).click(
// and… Action!
)
}
$(‘.exampleClass’).jCarouselLite({
afterEnd: function() {
initClicker();
}
});
and it works. Perhaps its a bit redundant, but… yes.
Nevertheless, thanx a lot for the plugin und fast answering.
Greetings from (today) sunny Berlin,
- Till -
@Till #453: Congrats to get it working. But remember, jquery’s click handler keeps getting added everytime you bind a click event. So, in your case, the event handler will get bound multiple times and will get triggered multiple times. Careful…
Thank you for information.
[...] I had to part with my bandwidth for all other features this plugin offered. Like my famous jCarouselLite plugin, I like my javascript code kept to the minimum. So, I decided and wrote a short yet sweet [...]
Hi,
thanks for this tute. I have the navigation on this page:
http://www.inspired-evolution.com/Portfolio.php
the functionality works but not the links. Do you know why this might be?
@Bruce Gilbert: You should remove the “return false;” statement that you are binding for the click event. This will solve your problem. By the way, you have posted on the wrong blog entry. This entry is for jCarouselLite.
This is really a great plugin, especially for sleek lightweight animations. Thanks a bunch!
However, I’m sorry to bother you with a small problem of mine – any help would be much appreciated:
I’m experimenting with a mixed content setup (visible: 1, circular: true) and experiencing some weird behavior with the prev button.
Cycling forward through my 3 test works like a charm (1>2>3>1>2>3>…), however, while going backwards no.3 is always skipped: 1<2<12>3<2<1<2<1<2<1… When test- no1 is active and the prev button is clicked, no2 is shown instead of no3. I’m guessing it could have something to do with weird CSS height problems, but that’s just that: a guess.
My html is a bit nested, basically it’s a
texttext
Any hint as to if you’ve had similar problems in the past or where the problem could derive from would be much apreciated. And apart from that – thanks again for your great plugin
sry, html got stripped
next try
text text
@ph – try putting your html inside “pre” tag
@ph: Instead of pasting your HTML code here, if you can provide a link to a page where i can see this behaviour in action, I could probably help you better.
…
…
Some more testing revealed that after restricting the width: of the containing div (anyclass)to about 500px and deliberately clicking the prev-button slowly, the problem does not occur every time. as i dont expect visitors on my client’s site to click the prev button too fast, i guess the problem isn’t severe.
@ph: Glad the problem isn’t severe. Still you shouldn’t be facing that problem at all. The Project Page itself contains an example of {visible: 1, circular: true} and I am unable to notice a problem.
thanks for taking your time to solve my problem, I’m currently doing some further testing. Unfortunately, I can’t post links to the live version publicly (see ->twitter on how to find another way perhaps
. Probably other css from the rest of my site is interfering with the carousel, however there is no other js/jquery used on the site. the problem occurs afaik in ff3.5, opera b10 and ie8 (winxp).
total Newb question…. Where does this go? Step #3:
$(function() {
$(“.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
@DonD #466: That goes inside a “script” tag within the “head” tag of your HTML page.
hey there im having an issue with this.i set the visibility to 1 and two displays, one where i want it and the other right below it.in the css, i set overflow to hidden but that didnt work. now when is et the vidibility to 0 the one i want shows up great but when scrolling through and it reaches the end, it shows nothing but the carousel container bg and i have to hit the next button once again to view more.
also if i set the visibilty to 1, it works fine but the extra image at bottom.
see it happening here http://taintedarts.com/portfolio.html
@kevinsturf #469: I checked it out. I guess there is some issue with “vertical mode and visible: 1″. But, it works flawlessly in horizontal mode. It could take some time for me to fix this issue. So, kindly work with horizontal mode until then. Thanks.
Hey. Thanks for a great and lightweight carousel. I’m having a little trouble with it though; when I scroll right all the items animate out of view very quickly. If I scroll right again – they quickly appear and animate away again. If I scroll left it works fine – also with scrolling right afterward. Any suggestions?
This is a great plugin. I’m using it now on a new project. I’ve also needed to implement a tabbing scenario where the ‘go’ button that corresponds to the current element needs to be highlighted.
I’ve worked it out myself using class names and the beforeStart and afterEnd callbacks, but it’s messy and doesn’t scale well.
Perhaps you could provide the original indices of the visible elements in the beforeStart and afterEnd callbacks along with the items themselves. This would let us match up the current item with a current button (or buttons).
I have a suggested change to the library for you. I changed lines 228 and 236 to use direct child selectors for the ul and li elements. This allows putting in content that contains unordered lists itself.
Ganeshji, I saw your comment about the height being calculated on the first li only. Your statement is you don’t know a use case for variable heights. I was looking at using your plugin to do a carousel of my latest blog posts on my site. The problem is that the amount of text that is quoted becomes a variable on how much is shown, so, the first one may be a little short, the second one longer and cut off.
Any more thought on looking into calculating the height of all of the LI first?
Thanks, Mark
How do i simulate the next,prev actions on mouse hover
So, I was looking at a way to deal with the variable height on items where the first one is not always the longest (per my message above). Here’s the solution I came up with:
Note: For those who are reading this, if you don’t know what you’re doing, probably not a good idea to try on your only copy.
In the jcarousellite_1.0.1.min.js file:
Change this code:
f.css({width:f.width(),height:f.height()});
to:
f.css({width:f.width(),height:g});
Change:
function css(a,b){return parseInt($.css(a[0],b))||0};
to:
function css(a,b){ return parseInt($.css(a,b))||0 };
and change:
function height(a){return a[0].offsetHeight+css(a,’marginTop’)+css(a,’marginBottom’)}
to:
function height(a){
var z = 0;
for (y=0;y z) z = x;
}
return z;
}
Because I only care about a variable vertical length, this only works for that, doesn’t take into account variable widths.
I’m not saying this is the best solution or the most efficient one, but for those who are looking for this, there you go…I haven’t testing it out extensively at this point.
That last function got cut, let’s see:
for (y=0;y < a.length;y++) {
x = a[y].offsetHeight+css(a[y],’marginTop’)+css(a[y],’marginBottom’);
if (x > z) z = x;
}
In case they come through, replace < with the less then sign, and > with the greater then sign.
Hi Ganeshji,
thanks for the fast response!
i am familiar with jquery but not an expert! any help would be appreciated.
i use ASP.NET3.5 and when i used master-page and load child-page(contain jCarousel control) in tag :
test
Child- Page :
<<
>>
Test0
Test1
Test2
Test3
Test4
Test5
Test6
Test7
Test8
Test9
$(“.container .anyClass”).jCarouselLite({
btnNext: “.container .next”,
btnPrev: “.container .prev”
});
it didn’t show any content!?!?!? just show buttons !?!?!?!
how can i solve this problem ???
please HELP me , so thanks
hi again , i used tag TABLE in master page …
please HELP me , so thanks
@Thomas #471: Please direct me to a link where I can take a look at the problem.
@Brian #472: Nice Idea. I will get to implementing it as soon as I can squeeze out some time. Thanks for the suggestion and I am glad you got it working anyways.
@Brian #473: Thanks. Can you kindly email me the modified version at ganeshread [at] gmail dawt calm. I will try and incorporte it into the next release.
@Mark W #474: I understand you requirement. But at the same time, wouldn’t you fix some height for the carousel elements by default. Obviously you don’t want your blog post carousel to grow bigger than a particular height. isnt it? If that is the case you can fix the height of the li’s thus making the use-case work. Even otherwise i get your point. I will try to implement it as soon as i can squeeze out some more time. Thanks.
@Marios #475: Right now the carousel allows only click events for “next” and “prev”. Just browsing through the code and changing a few lines where the buttons are bound to “click” events to “hover” events should solve your problem.
@Mark W #477: Nice work. Thanks for helping others in the forum with your custom modification. Programmers like you who share are those who make open source tick.
@Barbod #479: The information given is not enough for me to know what the problem could be. Kindly direct me to a page where I can see the problem live. That way it is very easy for me to spot the problem. Thanks.
I was able to setup a sample page using this plugin and it worked great, but now I am attempting to integrate this into an existing site and I am getting the following error in the height method:
el[0] is undefined
Not sure what is causing this. Any help much appreciated. thanks.
Prior post (482) was resolved. Issue was caused by another javascript error present on the page.
I am attempting to use the scrollable settings, but whenever I set one of the vertical settings other than ‘vertical: true,’, it no longer scrolls. It also appears to not scroll when ‘circular: true’ is set. The other issue I am having is that the btnNext and btnPrev seem to scroll the list in the same direction when vertical or circular is not set.
Thanks for your help.
Jon
function enableListItemScroll() {
$(“.vertical .listItemScroll”).jCarouselLite({
btnNext: “.vertical .listItemScrollDown”,
btnPrev: “.vertical .listItemScrollUp”,
vertical: true,
speed: 400,
scroll: 1,
start: 0,
visible: 6,
circular: false
});
}
Help!!!! A little background about myself I am a designer (please no smirking) and I placed your wonderful plugin on the website but it blows up in IE (what a surprise). I am designing on a mac but I tested it on a PC as well. It also doesn’t work on Safari. Please help me I have been fighting over this for over a week and I have to launch asap. Your help will be more than appreciated. Remember I am not a developer but I have to unfortunately wear many hats in this firm so please be detailed in your explanation so I can figure it out. Thank you so much again.
p.s
It works great in Firefox so there is hope for me yet. The website is jumbamediagroup.com/test.
Thanks
Dude, you need to expose a contact form so we can get a hold of you for questions. This thread is getting way too long.
I wanted to know if you have an example of loading via URL with AJAX. So far I see example of loading from an XML file, but we are trying or want to use your carousel to lazy load. So for example, you click the next button, it dynamically calls our url, we get back XML, I will parse that with jQuery and so dynamically fill the pictures as needed. We don’t want to fill all our images on page load, that would bring down our server since we have millions of users hitting the site.
Any way to do this? jQuery ajax request to url (hits a handler and handler sends back XML to be parsed) and then able to take response and show those pictures in your carousel this way?
Deferred loading via url is what I’m after here.
You need a support forum for this plug-in!
@orlando #485, #486: Please provide the height and width for all your carousel elements in css specifically. That should solve your problem. If it doesn’t let me know.
@Anonymous #487, #488: jCarouselLite is specifically built for very light weight use-cases. If Ajax based features are included into this plugin, it will no more remain jCarouselLite. There is another plugin called jCarousel that offers all the features you are looking for. Although jCarouselLite has a plethora of features, all of them have been added without introducing more KBs in. Thanks for trying jCarouselLite though.
Hi, and thanks for this great plugin! I have a question, but couldn’t find the answer through google. I want to stop an automatic circular carousel. I tried doing something like this :
$(“#text-viewport”).jCarouselLite({
auto:null
});
but it doesn’t work as I thought it might…
Any help ?
I am using this theme for my site which is in maintenance mode – but here’s the developer theme demo – http://www.press75.com/the-folio-elements-wordpress-theme/
When you click thru 3 times, the windows (light box/facebox) stop working. I don’t know if you can help me with that or not, but the developer is not helping us to fix the issue. It even does the same thing on his demo site. Is there a fix that someone who isn’t a programmer can fix?
When I’m using auto scroll, after pressing “prev/next” button time of next scrolling is not extended. For example: autoscroll time is 2 seconds, and I pressed next button five times, so next item will slide automatically just in a half of second later, not after 2 seconds.
Sorry for my horrible English…
Ok, I fixed it. I added new variable myinterval, and added in function go(to):
if(o.auto)
{
clearInterval(myinterval);
myinterval = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
}
also changed to “myinterval = setInterval several” lines before function go(to) (code looks similiar than this one i posted above).
@gynsek #492, #493: Good work. Glad you fixed it and got it working.
Hi,
Am using jcarousellite view to display Images in nodes in drupal based site. My great issue is, the default visible set on jcarousellite_add_view_js() is visible = 3, but i want to customize it that it would be visible = 1 for home page and visible = 3 for navigation links. Where could i customize it. pl help me immediately.
@Faaiz #495: I have no idea how to use jCarouselLite in Drupal. So, I cannot be of much help there. But, as far as the plugin itself is concerned, you have to just set “visible:3″ as its option or “visible:1″ as its option to achieve what you want. Hope that helps.
Hi
Great plugin. Definitely the best Carousel I’ve found – and I’ve tried half a dozen of them in the last couple of days.
Is there a way of resetting the carousel? Or even better – sending it to a certain index in the carousel?
My implementation changes the contents of the carousel through user input – this works fine, but it would work better if I could send the caroussel back to its initial position.
Cheers
Ben
Hi thanks for this wonderful piece of work.
I’ve been trying to add a right margin on the picture but I can’t make it work..
Could you help me please.
I’m using the Default Configuration.
Hi Ganeshji,
Thanks for the great carousel. I am a total nube when it comes to Jquery or javascript. The best i can do is copy and paste your code and hope for the best. I am having problems with the jCarousel Lite at the above address under Media / previous messages. the pictures in the carousel dont load on the first time that you access the page. But if you hit the back button and then the forward button. the carousel appears on the page the way its suppose to. I only know html (with much dreamweaver help)so please dont laugh when you look at my code. lol
@Jeff #499: I checked out your webpage and the carousel seems to work fine. You probably have fixed it in the meantime, or I am missing something here. Which browser were you facing this problem in?
@Thibault #498: The information you have given is too less to work with. Can you kindly direct me to link where I can see it in action.
@Ben #497: I see your point. I myself recently came across the need to send the carousel to a given index but since that need passed away, I forgot about it. Most probably I will get around to implementing that feature pretty soon. But I can’t promise you a date. In the meantime if you get around to fixing it, please keep me in the loop so that I can update jCarouselLite with that new feature.