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.
Hello there. I used jCrousel Lite to create the following slider: http://e-ast.ro/ , you can see that on the top of the page. What I want to know is how could I change the code to make the carousel stop at the precise moment I mouse-over it.
Right now it does stop but only after the next photo in line disappears from the slider.
code to make the carousel stop at the precise moment I mouse-over it.
When I used the vertical scroll, the carousel was out of sync by a couple of pixels each time it rotates in IE 7.
I put a workaround on my site. You can find it here
http://marcellscarlett.com/post/2010/02/11/jCarousellite-in-IE-7.aspx
after a few hours of struggle I managed to pull something off. I think it’s quite nice now, you can see the results of my work here: http://e-ast.ro/ .
Hello, I have used jcarousel-lite in my portfolio website found here: http://bradcoker.co.uk
I’m using the external controls with btnGo. I was wondering if anyone could point me in the right direction on how to highlight the current button corresponding to the current image?
Thank you!
Hi,
I appreciate all your hard work and thought I’d share a quick fix I made. I was having trouble with nested lists – IE: having a as part of the content inside the jCarousel unordered list. In short, your script was using them all as part its rotation.
I was able to fix it by just changing your original variable definitions. The easiest way to explain was type it up on my blog under jCarouselLite Nested Lists.
Hope it is of assistance!
Is there a way to stop the animation after a configurable number of cycles?
Hi,
I am trying to develop a Joomla Image Scroller Module using your jCarousel Lite plugin. Somehow the plugin works fine independently but on Joomla the images are not getting rendered.
Can you guide me on the same ??
Script has some bugs with content that contains HTML list tags (like ul, li, ol etc).
Fix:
replace
1. “var div = $(this), ul = $(”ul”, div), tLi = $(”li”, ul), tl = tLi.size(), v = o.visible;”
2. “var li = $(”li”, ul), itemLength = li.size(), curr = o.start;”
with
1. “var div = $(this), ul = $(this).children(”ul”), tLi = $(ul).children(”li”), tl = tLi.size(), v = o.visible;”
2. “var li = $(ul).children(”li”), itemLength = li.size(), curr = o.start;”
I tried to use “btnGo” navigation tool to scroll to some element. So, my script looks like:
$(function() {
var control = [];
control[0] = ‘.slider_control .r1′;
control[4] = ‘.slider_control .r2′;
control[8] = ‘.slider_control .r3′;
control[12] = ‘.slider_control .r4′;
control[16] = ‘.slider_control .r5′;
control[23] = ‘.slider_control .r6′;
$(”.cat_slider”).jCarouselLite({
btnNext: “#m_right”,
btnPrev: “#m_left”,
visible: 4,
btnGo: control
});
});
It didnt work fine.
fix:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
if ( val != undefined)
{
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
}
});
If you want to scroll to any position after document will be loaded, just add this code.
( “scrollTo” is new plugin attribute that points to element index )
if ( o.scrollTo )
go(o.circular ? o.visible+o.scrollTo : o.scrollTo);
In the examples the space above the images is 10px hight, but the space below is 15px high. I did not manage to make both 10px heigh, even though I put it in the CSS file (margin/bottom).
Does the jCarousel script itself change the values, too?
BTW: I’m using Opera 10.10, IE 6 seems to be 10px each.
Hi.
I’m trying to use your script for my futur website but i have some errors.
http://saloperie.fr/marc3/photo.php
I can use the prev button but the next button don’t work.
When i click on the next button all the pics are hidden
The circular option is enable.
Any idea ?
is there any way to load images on demand? with ajax or something?
Dear Ganeshji,
thanks a lot for this really neat price of code.
I am searching for a way to display the images in rows and colums.
Someone managed to implement this feature but i can’t reproduce this.
i.e. http://markmail.org/message/4gkiymtmzpjo5yrn#query:jcarousel%20multiple%20rows+page:1+mid:f66lffuehaihq7ou+state:results
Can you, or someone else post the fully edited jCarousel Lite Script?
Thanks, larsen
Hi Ganeshji,
Thank you very much for the plugin! I am trying to get the carousel to stop auto sliding on the last image in the list. I tried to do this by changing, “afterEnd: null” to, “afterEnd: stop” but it is stopping on the second image (and there are four in the list). Any ideas? Thanks again!
I would like to to state that an experienced essay writing service can be a good assistant on the way of term paper titles accomplishing. Hence, all students can use it anytime they would like to buy essays.
@Mark #477: I think you forgot to mention something, as I was having problems incorporating your changes until I found out.
You need to edit the width function, to send the correct variables to the modified css function.
P.S. i’m editing the original version, not minified.
so my code looks like:
function css(el, prop) {
//return parseInt($.css(el[0], prop)) || 0; //original
return parseInt($.css(el, prop)) || 0;
};
function width(el) {
//return el[0].offsetWidth + css(el, ‘marginLeft’) + css(el, ‘marginRight’);//original
return el[0].offsetWidth + css(el[0], ‘marginLeft’) + css(el[0], ‘marginRight’);
};
function height(el) {
//return el[0].offsetHeight + css(el, ‘marginTop’) + css(el, ‘marginBottom’); original
var z = 0;
for (y = 0; y z) z = x;
}
return z;
};
last function was edited out.
for (y = 0; y z) z = x;
}
Can you help me when mouse over animation must stop and when mouseout it must resume the animation. Thanks in advance.
Hi ,
You are doing great work .
Just tell me .If I mouseover prev button then it should continuously displaying prev images and stops auto functions same with next button.please tell me how can I achieve this .
Thank You
Somnath S
I like the the jCarouselLite.
There is one thing that looks strange – the size of list and indexes of its items.
I’ve got list of 8 thumbnails, but when I ask for the list size with ‘$(”.carousel .thumbnails li”).size()’, it returns 16.
In function called on click I save current index to global variable – currentIndex = $(”.carousel .thumbnails img”).index(this) – it seemss that the first thumbnail has index 0 when the page loads but when I click on it second time, it has index 4 …
What I’m trying to do is to do is to switch to next/previous item in list by clicking on right/left side of big image (carousel contains thumbnails). Is it some easy way how to “click” on next/prev item in list ?
Great carousel !
Maybe I have found a little bug : in a non-circular carousel with 10 items, the two last items are not visible and the carousel is stopping at the 8th item.
My parameters :
btnPrev: ‘#carousel .btn.previous a’,
btnNext: ‘#carousel .btn.next a’,
circular: false,
visible: 4,
start: 0,
scroll: 4
Thank you
PS: It would be relevant to dispatch an event when a non-circular carousel is at the first and at the last items and when the carousel is leaving them.
It’s working for me in changing this code :
} else { // If non-circular and to points to first or last, we just return.
if(toitemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be “to” and we can proceed.
to this code :
} else { // If non-circular and to points to first or last, we just return.
if(to == itemLength-v) return;
else if(to>itemLength-v) curr = itemLength-v;
else if(to<0) curr = 0;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.
But I don't if bugs will appear in other configurations…
It’s better with this code :
/*
// original
if(toitemLength-v) return;
else curr = to;
*/
// fix
if(to == 0 || to == itemLength-v) return;
else if(to>itemLength-v) curr = itemLength-v;
else if(to<0) curr = 0;
else curr = to;
and (for the disabled class management) :
/*
// original
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll itemLength-v && o.btnNext)
||
[]
).addClass(”disabled”);
*/
// fix
$(o.btnPrev + “,” + o.btnNext).removeClass(”disabled”);
$( (curr == 0 && o.btnPrev)
||
(curr >= itemLength-v && o.btnNext)
||
[]
).addClass(”disabled”);
And it works perfectly with my parameters… Forget the event dispatching I have told, I haven’t seen the “disabled” class on the buttons (is this in the documentation ?)
Hey man, this plugin seems great. I’m trying to reduce the number of scripts I include on my site and this seems like it will replace 3 other jquery plugins I was using.
I will need to use the ‘external controls’ features and I think I have it figured out but wanted to let you know that the documentation about it in the demo is kind of confusing. In the demo page for External Controls you just say ” Buttons, buttons and more buttons. Feel free… “. This is cute and all but the example code isn’t that obvious, and I think it would be better if you gave a brief description of how it works and what the contents of the btnGo parameter mean. I looked at the parameter documentation and that explained it okay but it would be nice if the demo also had the explanation.
Anyway, I love the humor in your other demos, so don’t think I’m saying it should be too serious, just that that particular one could handle some extra data
Thanks for making the plugin!
I tried creating a jcarousel using the above instructions, but it will not work. My html code is as follows….
TOTAL ONE PC SOLUTIONS
<<
>>
I verified that the .js files match the names in the head but nothing works
TOTAL ONE PC SOLUTIONS
<<
>>