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 plugin. Just got one query – when using a combination of auto advance and external controls how do you get the auto advance timer to reset when you use the button to manually advance?
If I click the button just before the auto advance would have happened it advances twice in quick succession.
Thanks!
Hi Ganesh,
I am using .btnGo option to go to the particular slide .In the first loop it works fine it just slides to the slide name which is clicked but in the second loop it slides to the destination slide and in between it shows the slide which user already navigated . I don’t want the slides in between shown . Is there anyway i can hide the slides in between and only slide to the destination slide clicked?
I appreciate all your help here.
Thanks
Yash
Hi, awesome plugin. I have one question for you – is it possible to pause or stop the carousel programmatically? I will really appreciate your help regarding same.
Thanks !
Hi, I’m trying to use the plugin but I need to run a callback to add a class to the middle item of the carousel once it’s been initiated. I can add/remove the class I need using the beforeStart and afterEnd callbacks, but I can’t figure out if there’s a reliable way to access the visible items after the carousel initiates itself so I can add the class. I’m looking at your code to try and add an onLoad callback of sorts. Any recommendations without having to hack the plugin?
Hi again. I hacked your code and added an afterLoad setting to the options and
if(o.afterLoad)
o.afterLoad.call(this, vis());
right before the vis() function declaration and it seems to work.
Default Configuration.
One demonstration page, please!!!
sorry!!!!
Fraction Configuration
One demonstration page, please!!!
I can not understand libraries which force it to work
Hi Ganesh,
Can I have variable width for images with this plugin? There will be images with different width but the same height. I tried but it “crops” the image to same dimension. Is there a workaround?
Fraction Configuration
The left button should be hidden by default
hi there,
have you perhaps taken a look at my problem?
Thanks in advance again.
Simon
Hi,
I purchased a wordpress template (Using WP 2.8) with the JCarousel lite already embedded and I added JQuerry Lightbox as recommended by the designer. I went through his instructions:
F) Adding items to featured slider
The featured slider takes posst from one category and displays them. After installation, You need to specify which category that is.
1) Go to Admin->Appearance->Dakr Pro Portfolio Settings
2) Select a category for Featured (slider) Category
3) Optionally, You can hide posts that are in this category, from posts/blog page.
4) Save
Next, You need to add posts in that category and add a Custom Field called background to specify the background image.
For example, You create the post. Now add a Custom Field called background and add a full url to image as value, like so:
http://www.themepreview.net/themes/wordpress/darkpro/wp-content/uploads/2009/06/faction-913×199.jpg
As You can see, the background images should be 913×199 pixels\
I did as instructed above, but all I get is a small white square in the lower right corner of the slider. I have tried to contact the designer but have not heard from him and I am at a loss.
I also went back and made sure the web page url was in lower case under the settings> general tab, and I have tried using both url’s http://www.m-bryant.com/wp-content/uploads/2009/07/welcome-913×199.jpg
and
All help appreciated!
Milton
http://www.m-bryant.com
I have this plug-in in use on my home page which is running on WAMP. It works great in every browser except Safari and Google Chrome. In those browsers the carousel doesn’t show up when I first load the page, nor when I hit reload. When I navigate to the home page via the on page navigation link then it shows up. Any ideas what could be causing this?
Thanks,
Jeremy
Hi!
Concerning my comment #525 I posted a test page here :
http://supakazes.free.fr/carousellite/carousel.html
I explained the problem on the page.
Thanks for your help
kazes
hi, awesome stuff here.
i have one problem, it’s been killing that i can’t get it to work. i have carousels inside divs that are supposed to toggle. it toggles if i have the div set to visible. but if i set the div to invisible when the page loads, it still toggles but it does not show the list content, only the prev and next buttons show up. i’ve spent so much time researching for help but haven’t gotten any. i’m hoping you could tell me what the issue is. thanks
I resolved the issue I posted at 562. I switched from $(document).ready to $(window).load and it comes up immediately in both safari and chrome.
i have a similar problem as Jeremy at 562, only difference – in Opera 9. Tried to fix it as You said, but without any results… Any ideas?
I will be grateful for any clues?
Thx in advance.
hello,
Using the jCarousel as single image slider doing something bizarre when using the “start” option, When i click next/previous button for the second time it skips some images in the middle..
I was hoping to send you a zip file as a demo, but couldn’t find an email to send the file to..
Hi there,
I am too trying to make the externalControl detect the current image, and set some sort of style to show which. Any suggestions for doing this? Or perhaps this would be possible to incorporate into the actual script?
Best regards, Jens
I have used this jCarousel Lite script.
I basically built the required design in an index file. All worked and images linked, etc.
Then I moved it to the build html.
However, the only difference is that the slideshow is placed inside a div that starts off hidden. When it is revealed the slideshow is not visible. The box holding the slideshow is.
How can I resolve this issue?
Thanks in advance
Hi
I managed to get the images to show in the correct place and div, but unfortunately now, they appear in every div. Instead of display:none you add visibility:hidden to hide the divs, however, this doesn’t hide the images in the li tags.
@Mike Mai
I think a friend and I have solve the issue. With having the slide in one hidden div and the then open and close original div.
We discovered that on the div, if you set the display:auto then it seems to work.
If it doesn’t then I will send you a full example of my working one, to show you what we discovered.
OK
Hum!
Seems to have the div that needs to be hidden, always in view until the clicks start taking place.
hey Rob, i dont seem to get it to work. i have my codes like this:
previous
next
oops, don’t know how to paste the codes here. do you mind to email me? mj2themax2002@yahoo.com
i’m fairly new to coding. :/
@Mike Mai
Hi
You have to hang tight. My solution didn’t work. It only works if you have a carousel on the opening visible div. Will see if I can get a resolve soon.
I am completely new to coding
@Matt #551: Sorry, Unfortunately it is not possible to reset the timer at present.
@Yash #552: I don’t know if I am understanding your requirement right. But if you don’t want to slide through the images between 1 and 10 for example if you click on the 10th button when the currently displayed slide is 1, then sorry it is not possible. That is a feature of jCarouselLite.
@Sahil #553: Unfortunately no. It is not possible to stop right now. But, I will make a note of it. Maybe in another release I will return an API once the call to the plugin is complete using which you can do certain functions with the carousel.
@Matt #554: If all you want is to get the visible elements, you can directly use jquery to query the visible elements of the plugin after the call to the plugin is complete. You don’t need any assistance from the plugin itself. You just need to select the “li”s from the carousel. You know which ones will be visible once the carousel will be initialized because you are the one setting parameters and initializing the carousel. Makes sense.
@Matt #555: Glad you hacked it and got it working, but i feel it is not necessary, coz you can anyways select the visible “li”s using direct jquery after the call to the plugin returns.
@Dima #556: Give me another couple of days, I will try to get a demo page uploaded.
@Aadi: Technically you can have variable width but the carousel will calculate the width of all the elements based on the first “li”. This is basically because jCarouselLite assumes that all the “li”s will be the same size. So, if you try and put the widest image as your first element, it should work, although not as you might want it to.
@Milton #561: Sorry couldn’t be of much help here, other than to say that there was some problem spotted using lightbox along with jcarousellite. Why don’t you try thickbox and see if it works for you, or try searching the comments section. I vaguely remember, someone posting a solution for that.
@Jeremy #562: Can you point me to your site so I can take a look.
@kazes #563: I think you have hit upon a corner case. The problem is when you have circular: true, start to be non zero etc. Just disabling circular: true makes the carousel work perfectly again. Try that, in the mean time, I will try to take a look at the corner case bug.
@Mike Mai: The carousel builds itself once the page is loaded. If it is invisible, it probably is not able to calculate the width and height of elements accurately. That is the cause of your problem
@Jeremy #565: Glad you got it working. I guess, $(document).ready is not getting fired right with newer browsers. Anyways, we have our good old window.load for those cases. Dont we?
@mega car #566: No idea. Just point me to the page and I will take a look.
@Mike More #567: ganeshread at gmail dawt calm
@Jens Nilsen #568: I am unable to understand what you want to do. Can you be a bit more elaborate.
@Rob Snow: When the carousel is constructed it needs to calculate the height and width of its elements, but if the carousel is going to be invisible during construction, it could be impossible to accurately calculate the dimensions. So, I suggest, once the carousel is fully construction you can use jQuery to hide it instead of having is invisible to start with.
thanks, Ganeshji. that seems complicated. hope rob and i could figure it out somehow.
http://www.fuero.pl
regards
Thanks for your reply!
What I want to do, is make the script detect what image is being viewed (I use the externalControls, the list of buttons to navigate, as a pagination, and have it set up to flip from 5 pictures to the next 5 pictures when clicked). So, that when I click for example button #3, which in turn navigates to image #15 it will set a border (css style) to the button clicked, indicating that I am now viewing whatever I should be viewing when I clicked button #3.
Does this make more sense?
Also, is there a supported method for using multiple carousels on one page?
Best regards, Jens
@ Jens Nilsen
http://nathansearles.com/loopedslider/
if someone can merge the two, that’d be awesome.
Just a warning: if the is set to display:inline there are some very strange and undesirable effects.
Found a cheap solution for my first question: Use jQuery to set a border to the clicked element, and remove the border from all classes with the externalControl class-name. It works, but would be better with a internal method for it.
The LoopedSlider is more or less identical to jCarouselLite in functionality. Did anyone manage to successfully replicate multiple carousels so far?
hey, love your site! had a quick question on implimentation about jCarouselLite… is there a way to reinitialize it through JS??
basically I have a “live search” or “filter” that matches a field, hiding and showing LI elements in the scroller… which works great, but the scroller still retains the original count (# of LI items), and naturally scrolls way past the # of remaining elements.
my first instinct was to call the main function again, but that seems like a lot of overhead for the browser… any ideas??
thanks!
@Mike Mai
Found this site!
Don’t know if this can help solve the problem:
http://www.learningjquery.com/2006/09/slicker-show-and-hide
Hi,
first of all thank you for the plugin.
I have a problem when setting the start value to anything else than 0.
when clicking back and forth the carousel seem to get irritated about the right display order. ie. it jumps back 3 and forth 2 and it seems to do it randomly. anybody had that problem before?
Hi!
I have a new question for you Ganesh
I am trying to make the scroller go the “other way” when I click the next-button. I tried the solution in commend #547, but I couldn’t get it to work. The “fix” is applied to a test-site I’ve set up: http://inteaao.com/temp/
Thanks!
Regards
Niclas
The plugin supports image and non-image content, but can a list, , item within the -enclosed hold both types of content. I’m thinking about a carousel like this one.
Thanks
@Jens Nilsen #581 and #584: Glad you got it working with existing features. There is no method within the carousel to make such a thing happen. Also, what is your problem with multiple carousels in the same page? It is always possible. Can you be more specific.
@Mike Mai #582: loopedSlider is only a single image (content) slider, i believe. You cannot have multiple visible items and scroll more items. Anyways, what functionality from that are you looking for?
@Lakario #582: Thanks
@Max Sterling #585: Unfortunately no, I guess, you will have to re-initialize it manually by first unbinding the “next” and “prev” click events and then calling the main method again with necessary parameters. It is not a big overhead because, any other internal init method also has to calculate most of the things the main method does. Maybe it would have been a big overhead with very complex carousel implementations. jCarouselLite is very lite so, initializing it again shouldn’t be a performance hog. But, remember to unbind the click events from your app code.
@Mika #587: That is strange. Point me to a test page where I can witness the behavior. That way, i can probably try and help.
@Niclas #588: The solution in #547 was for auto scroll. Your requirement is for manual click. In any case, the solution is even more ridiculously simple. You don’t even have to change the code. All you have to do is give the “prev” button in place of next and “next” button in place of previous and you would have reversed the functionality, isn’t it?
#finid #589: Ofcourse. As far the the content goes, you are limited only by your imagination (and ofcourse what a “li” can hold)
Hi,
Is there a way to make JCarousel handle multiple rows of items? It looks like one person has started work on the idea, but it looks like it has its problems: http://markmail.org/message/4gkiymtmzpjo5yrn#query:jcarousel%20multiple%20rows+page:1+mid:f66lffuehaihq7ou+state:results
Hi there,
Firstly, great script. I’m having a problem though injecting the carousel into a page dynamically using JQuery’s .load method. Basically, any number of carousels can be injected into a DIV depending on choice.
The images are not loading correctly. The ‘li’ element’s height is generated at 17px, only a fifth of the thumbnail. Would you have any advice on this?
Thanks
Hi,
I use your plugin in Liferay in works fine with FF and IE7 but with IE6 the images doesn’t appear. Can you help me?
Thanks
Hello Ganishji, I have thoroughly enjoyed your carousel and think it the best one available in Jquery, especialy for its never ending function. After finally installing and debuging it within the 1920’s gothic jewellery website i am working on i was very happy to have a very cool scrollable item viewer, i built it to be viewed though an iframe so the large li divs wouldn’t complicate my tidy page and low and behold it worked on all but google chrome where it appearse to have a massive left margin of half the page! Is this a bug or is it just my styling? I’m not used to google chrome doing something different to firefox so i’m not quite sure what to do with it.
Many thanks. http://www.charmoffensive.me.uk
Hey Ganishji, I love the jCarousel lite jquery plugin, but had 2 issues relating to the ‘auto’ functionality:
1. When the number items is less than the number visible, it seems to scroll once, then reset and scroll the same items once more. Probably just a check that only makes it auto scroll if the number of items is greater than the number visible.
2. It would be nice to seperate the btn scrolling amount vs the auto scrolling amount. For example: the auto scrolls one at a time, and when the button is pressed, it scrolls an entire page.
Thanks.
I have noticed the same problem as 595 willem with the auto scroll reaching the end and scrolling one item and then resets.
I am trying to scroll 4 at a time and if there are lets say 9 items it does the weird scroll one at the end and then reset.
Any ideas how to fix this?
Also notice a few other things.
1. if you dont have any thing in the list you get an error on the page. The reason for this is my list is dynamic so some days there might not be any.
2. if you set it to scroll 2 at a time and show 4 but there are only 2 list items it only shows the second one and scrolls it really fats and you never see the first one.
Also with it set to show 4 and only 4 list items it scrolls and then resets and then scrolls. it does not add the items below and scroll up. might be an issue with the counting items and adding them below if only as many as the show number.
ok one lat thing.
if you set it to carousel and auto start with only one list item nothing shows up. Shouldnt it calculate how many list items and if les than the how many to display then not scroll?
Hi There,
Thank you for this awesome function. However, I am having problems with installation. I have never used jquery before, and design using dreamweaver. I downloaded both jquery and jcarousellite and linked them to my document, but am not sure I understand where to place the button/function code and do not know what “fire a call to plugin” means. Can you help me?
@Inejiro #591: jCarouselLite does not support multiple rows. Thanks for pointing to that project. I will have an eye.
@Matt #592: Inserting a carousel dynamically should work fine. Can you host a test page where I can see your issue?
@Mary #593: Sure, What exactly is the problem. You are giving too little information. Can you host a test page and direct me towards it. That way, I can solve your problem more easily
@Alisdair #594: jCarouselLite works well on Chrome and Safari. That much I know. Since you are using an iframe, I am not sure. Can’t be of much help here. But, why do you think, iframe is a good choice again?