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!
How can I make jCarousel Lite works inside a table?
I put the div’s inside a cell and did not appear in ie7.0
hi newbies here help me,
where can i put this line
$(function() {
$(”.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
thanks,
mel
vhi newbies here help me,
where can i put this line
$(function() {
$(”.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
thanks,
mel
I need put in one thickbox the jcarousel, but i can’t. Is posible?
Thks (excuseme for my english, im from spain)
hi, does there carousel need to be a list? im trying to build a more complex carousel structure. for example.
Hi, seems your plugin doesn’t work with jquery 1.2.1. Please update your code. Thanks.
Hi,
How do you dynamically update the whole carousel as per your examples page?
I can see that you’re calling an external PHP file that provides the necessary code for each example.
In particular I’m trying to update a carousel similar to your external controls example - however, the updated carousel may vary from 1 to many items so I can’t hard-code the .externalControl classes.
The problem I’m having is the plugin doesn’t appear to get called, despite the remote call returning the … code to fire the call to the plugin again.
What am I missing?
Hope this makes sense.
Thanks.
First, awesome script, does exactly what I need. Nice work!
Now the problem: I have jcarousellite up-and-running on a little prototype I’m building, on a barebones page at the moment. For some reason, all of the s in my are being copied and duplicated in the DOM (so that after load, all s appear twice). Is this intended, or a bug? It causes some problems with my scripts…
Unfortunately there seems to be a problem with jQuery 1.2.1, what a pity :-/
I had a look into the source-code, it’s very easy to make it jQuery 1.2.1-compatible. The methods gt() and lt() were removed in the new version, see jQuery’s release notes for a description.
A quick workaround: Get the unpacked version of jCarouselLite (http://gmarwaha.com/jquery/jcarousellite/js/jquery.jcarousellite.js) and change the following:
* replace line 231
ul.prepend(tLi.gt(tl-v-1).clone()).append(tLi.lt(v).clone());
by
ul.prepend(tLi.slice(tl-v).clone()).append(tLi.slice(0,v).clone());
and
* replace line 295
return li.gt(curr-1).lt(v);
by
return li.slice(curr).slice(0, v);
That’s it - works fine for me. You might want to re-pack the file afterwards. Ask Dr. Google for “JSMin”.
Hi, I would like to advance the carousel from a function. I.e. I have a slideshow fading in images in a certain order - now i would like to advance the carousel below in the same order.. can i hook into the code somewhere, or call a “next” method on it?
And thanx for the nice plugin!
Hi. Thanks for making this, it is very nice. I really needed it working with the most recent JQuery, though, so I took a stab at fixing it. I’m not sure if my results are 100% correct, but I could only find two lines that caused an obvious error. The diff is below, and for my purposes, these minor corrections seem to do the trick.
230c230
ul.prepend(tLi.slice(tl-v).clone()).append(tLi.slice(0,v).clone());
292c292
return li.slice(curr).slice(0,v);
I’m having a lot of trouble getting jCarouselLite to work properly. Is there any way you can make a zip file with an example available? Thanks
hi Ganeshji & Marco Moreira
first i thank for the plugin. i am using the jCarouselLite with jplugin 1.2.1 in my client site it is working fine in ie6, ie7 & ff. i am using auto scroll and i am displaying 6 images(totaly i have 9 images). the problem is ” when the page get load it shows 6 images in the third scroll i am getting only 2 images. the same problem Marco has faced. help me to show 6 images in each scroll…
thanks in advance
Is there a way to get the autoscroll to work with a pagination control as well? So the one you see here http://gmarwaha.com/jquery/jcarousellite/index.php#demo but with the content autoscrolling as WELL as controled by the user in the pagination?
Please email me back if someone can tell me how to do this? I’m not a JS wiz by any means… ergo why this designe loves the jQUery library… it’s easy to plug and play
Hi,
I followed the steps in installation, but the carousel isn’t working. The images are all just showing. I’m using ASP.Net, Visual Web Developer in c#. Any help appreciated.
Thanks
Emma
Hi,
Great plugin - I’ve been using it for a few projects, but have come across a problem / suggestion. When auto-scrolling the carousel, there’s always a pause after each item(s) - is it possible to have the automatic scolling continuous, so that it acts more like a traditional scroller with no pauses?
Thanks,
I can’t get it to work. The problem is that the examples are not complete so I doing some thing wrong.
Here’s my code:
$(function() {
$(”.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”
});
});
>>
I am really excited about using the Carousel, it looks wonderful
Hi:
Thanks for the wonderful module. I used drupal for a site and have installed jclite in it. I created content using it. But the scroll is not happening. I am not a coder. Following is the code. Please help!
Thanks.
Radha
>
$(function() {
$(”imageshow”).jCarouselLite({
btnPrev: “prev”,
btnNext: “next”,
auto: null,
speed: 200,
vertical: false,
circular: true,
visible: 2,
start: 0,
scroll: 1,
});
});
BUG:
Hi, I think I’ve found a bug with jclite, when using fractional display - I’m showing 1.5 items, and when i get to the end of the list, where there should be 1/2 of the first item shown, i get nothing, and scrolling to the “next” item then goes out of sync and starts in the middle of the first item. Is that why you’ve set circular:false in the fractional example?
$(”.portfolio-carousel”).jCarouselLite({
btnNext: “.portfolio-carousel .next”,
btnPrev: “.portfolio-carousel .prev”,
visible: 1.5,
scroll: 1,
start: 0.5,
speed: 400
});
Any ideas on how to fix it?
BUG:
Also, when you specify visible in .5 increments, the carousel doesn’t seem to start in the right place - it starts with 1/2 of the last item first, then the full first item. Only when you go up to visible:2, does it behave normally. When you add circular:false it works OK…
Does anyone know a way, when using the external controls, to highlight the current image?
If it’s on the third image, it would look like 1, 2, [3], 4, 5… etc. I was toying with the idea of assigning the CSS through a callback, but how can I access the actual number of the image? Any ideas?
I have made the changes to the unpacked version of .js file.
Unfortunately I still cant get it to work with any 1.2.x version.
$(function() {
$(”.homeJC”).jCarouselLite({
auto: 1000,
speed: 2000
});
});
thats my usage… I am trying to debug but I am going nowhere very slowly.
If anyone has any ideas please give me a shout…
Thanks
Hi, im having problem using this with all other scripts like accordian or prototype. and is i use jquery.noconflict then this stops working and everything starts working
fantastic plugin ganesh!!, and many thanks for JQ 1.2 update!!, amazing size for all the features man, thanks again!!
I’m not sure if it is a bug or what but I’m trying the vertical corousel and I cannot use images of different height. If I do it will show all images having the same height (the minimum height)
Hi, I love the plugin. I have the basic plugin working fine, but I can’t seem to get something like your Custom Widget working. I’ve copied your code snippet for the custom widget, but I’m obviously missing something…
can we have access to the Css please.
regards
Hello, thank you very much for this script, as I can personalize the buttons “Next” and “Prev” ?
Thank you.
jCarousel Lite can’t works inside a table cell in IE !!!
How can I fixed this ??
Thanks
sitet: http://www.finditreadit.com/garyl/google
If you click into one of the editions, then scroll the thumbnails on your right hand sides, you will find that it works from left to right, but not the other way around. It will bounce back to certain end pages of edition. Any hint?
It seems I need to specify cicular:false, otherwise it won’t work.
How can i center the pictures if i have less than 2 (visible 3 for default) tahnks all.
REALLY AWESOME YOUR WORK!!!!!!!
Unfortunately I fall into the class of people that are new to jquery and can not figure out how to make the demo work based off the 1, 2, 3 steps provided here:
http://www.gmarwaha.com/jquery/jcarousellite/index.php#install
I noticed that css is not included on that page so taking from the 1,2,3 example does not in fact work. Also, I had no luck trying to digest from the working demo how to set up locally. I’m not sure why I can’t figure this out. It would be great to have a zipped example for download that would work locally - even at its most simple form.
Bug found: if you have 6 images and plugin set to circular: false, visible: 4 and scroll: 3, it won’t work. It shows 4 images but it won’t switch to next since 4 + 3 = 7, meaning greater than the number of images available in the gallery.
Hi,
I look for a cross navigation, so i must combine the vertical and horizontal carousel.
Is anybody make this ?
Thank a lot
Hi there,
Is there any possibility to have a slide function if I click on the image? I want that if the users click on the image that it slides to the next image (same function like the arrow). Of course this makes only sense if I display one image
Thanks for your answer & regards
Hi. If you set a “start” and then try to scroll p (for vertical version) it doesn’t scroll.
I fix code
was:
if(toitemLength-v) return;
else curr = to;
gott:
if(toitemLength-1) return;
else curr = to;
About jCarousel Lite - great work - thx!!!
If you’re having problems with targeting your div based on class (like when its inside a table cell) - simply target it by ID
it works fine
Hi, first congrats for this great work.
Just a little question :
How to do for running 2 carroussels in the same page ?
Thanks
Hello. I’m working to implement jcarousellite, but am having trouble. I am presenting a UL of items that are text based. Each LI in the ul includes a div with a ul and li items for detail. An example of the html markup is shown below. The problem that I am having is that jcarousellite puts css into a “style” parameter in the LI items, overriding my css. This causes the items to be not sized correctly, and look like hell. How can I override the styles so that it doesn’t reformat my markup?
Example of html markup
Name
Description
Price
More Detail
Buy
Name
Description
Price
More Detail
Buy
Hello. I’m working to implement jcarousellite, but am having trouble. I am presenting a UL of items that are text based. Each LI in the ul includes a div with a ul and li items for detail. An example of the html markup is shown below. The problem that I am having is that jcarousellite puts css into a “style” parameter in the LI items, overriding my css. This causes the items to be not sized correctly, and look like hell. How can I override the styles so that it doesn’t reformat my markup?
Example of html markup:
Name
Description
Price
More Detail
Buy
Name
Description
Price
More Detail
Buy
@Anam
To get 2 carousels, just create your 2 lists with different class names (eg newsscroll and newsscroll2) and call 2 scripts like so. Don’t forget you’ll need 2 lots of prev/next buttons if you use buttons;
$(function() {
$(”.newsscroll”).jCarouselLite({
easing: “easeinout”,
auto: 500,
speed: 1000,
visible: 1,
btnNext: “.next”,
btnPrev: “.prev”
});
});
$(function() {
$(”.newsscroll2″).jCarouselLite({
easing: “bounceinout”,
auto: 600,
speed: 2000,
visible: 2,
btnNext: “.next2″,
btnPrev: “.prev2″
});
});
I was trying the yuicompressor on jcarousellite 1.0.1* and got this
error: “invalid property id” at line 239:
line 239>> li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
What could be wrong?
* http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js
Hi!
First of all, thanks for this cool plug-in. It really helped me to get rid of a flash movie.
I have a small problem though: I have a div in my page that goes over the carousel (with CSS position absolute and z-index set).
It works perfectly in Firefox but my div goes under the carousel in IE 7 and 6…
Do you have a clue?
Thanks
Sorry for the delay.
Thanks a lot for your help
@Nick : It works fine on Firefox, not with IE (the first carousel is hidden)
Here is my code :
$(function() {
$(”.anyClass”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
mouseWheel: true,
visible: 2
});
});
$(function() {
$(”.anyClass2″).jCarouselLite({
btnNext: “.next2″,
btnPrev: “.prev2″,
mouseWheel: true,
visible: 2
});
});
Of course i have 2 lots of prev/next buttons, 2 DIV with different name.
A big thanks for your help
I have the following isue: I want the user to be able to disable all jQ animations on a website. Since jC does not allow to change the spped of the scroll to 0 after its created, is there a way to destroy the jC object to create it again?
Hi Ganesh, I’ve added a new parameter - hidenav - to hide the prev/next buttons when in non-circular mode and if at the beginning / end of the list, respectively. Tried to send you a patch but couldn’t find your email addy, so I’m posting here. You can grab the files on my blog:
jCarouselLite with hidenav patch
http://www.mattromaine.com/2008/05/05/jcarousellite-with-hidenav/
Hi Ganesh,
I have to report one bug with this plugin which I really love. Hopefully you’ll be able to fix it, let me know if you need some help testing.
I uploaded screenshot here:
http://f1vlad.com/etc/sf/jCbug.png
I tested it in Windows Vista on IE 8.0.6 beta.
Thanks again for a great plugin,
Vlad
Hi,
This is an excellent plug-in that surpasses other carousel plug-ins available (as far as the simplicity is concerned) !
I would like to be able to display a number of items on two lines (3 on the top, 3 on the bottom).
The idea is to design a CSS div container that can hold these 6 items (more or less, 2 lines and 3 columns) and the .next or .prev button could display then the following items
Is there a way/trick to achieve this?
Thanks in advance
Jack
as with everything to do with jQuery this is brilliant!
hi, i am having some problems with the navigation.
when i hit next button it skips one
so 1 + 1
but when i hit next again it skips two
so 1+1+1
and i’m trying to create a external with multiple button slideshow
so i have named my buttons .1 , .2 , .3 and so on
when i hit .1
it skips 1 slide, when i hit 2 it skips 2 …. not to slide 2 but 2 slides….
how can i solve this ??
Hi - I found a bug and logged it on the jQuery site, but wanted to make sure you saw it…so here’s the link:
http://plugins.jquery.com/node/2562
Dear Ganeshji,
I made a very interesting navigational unit using this script, with multiple levels.
I have a very specific problem I’d like your help with to solve. Maybe if you have time you could hit me an email and assist me ?
I’ll guarantee you, you’ll be interested in this, it turned out quite nice. But there’s just one thing that’s not working for me. I could link you here but it’s kind of a private project.. so if you have time, by all means.
Thanks in advance
-Spades
When setting visible to a fraction like 3.5, the partial image is on the left rather then on the right. If I set circular: false, as in the example it correctly shows the fractional image on the right. Is there any way to get the the fraction image on the right with circular true?
How would you set auto to null or 0 within these click functions? I’m wanting to stop the auto scroll when the prev or next buttons are clicked?
if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});
if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});
Thanks for your great plugin!
@Aaron - To create an “active” image, you need to add a class to the image like this:
$(".default .jCarouselLite img").click(function() {
$(".default .jCarouselLite img.active").removeClass("active");
$(this).addClass("active");
});
I hope that helps.
Hi Ganesh, this is a fantastic plugin! I have created a page using this great little utility, and have added some jscript of my own that calculates the available space for a navigation list which increases or decreases the number of items in the menu based on the browser width, but I too am having odd problems with the navigation (similar to Avin, comment #103).
Here’s an example: http://mintox.cluedesign.com.au/sites/mintoxcomau/dev/divwidth.aspx
I’d appreciate it if you can offer any suggestions as to what causes the odd prev/next scrolling and how it might be resolved. Thanks again! =D
BUG:
$(”.toc”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
scroll: 4,
visible: 4,
circular: false,
speed: 800
});
Gallery has 10 items. Click next and it shows the next set. click next again and nothing happens. It wont show the last two items.
BUG2:
Same setup as above, but in circular mode. if the number of elements is divisible by the number visible or the number to scroll than the gallery will scroll smoothly in both directions. if the number is off, ie 11 elements, there will a snap when you get to the end.
this is a really great script.
keep up the good work.
Great Plugin, but i’ve come across this issue and am not sure whether the issue is with your plugin or jquery itself.
i’m using the plugin to scroll a bunch of divs.
for example:
.box { width:100px; height:100px; }
1
2
3
Everything works and looks fine. But if you add “overflow:auto” or “overflow:scroll” into the CSS, it messes up the animation. Adding “overflow:hidden” doesn’t affect the animation.
I’m using this plugin with btnNext, btnPrev and btnGo for navigation. Is it possible to have 2 different button assigned to the same action? I would like to have numbered buttons to access the individual slides (i use btnGo for this), but I would like another button to reset to the first slide. is this possible?
Great plugin, but I noticed a couple of bugs:
If circular is set to false, it won’t scroll back to the beginning. I had to change somewhere around line 320 to this
if(to itemLength) return false;
else curr = to;
Also, this line was crapping out in Safari for me for some reason:
li.css({overflow: “hidden”, float: o.vertical ? “none” : “left”});
I changed it to this and it worked (I’m using just a horizontal scroll, so I don’t need the vertical option).
li.css(’overflow’, “hidden”);
li.css(’float’, “left”);
hi all
i have a problem that my css is rtl and this tutorial dont say any thing about how to reverce the direction , the problem i have dose not appear if there is a lot of imgs its just appear if i have a number of imgs less than the max number i put in the configration
so plz can any body help me on this
Thanks for all the work on this plug-in, very easy to setup and get working.
I am however having a problem getting this to work with Safari for some reason: http://www.malcolmmobutusmith.com/
The images load, but the navigation doesn’t work and the images seem to be just appearing down the page unless I set the height of the carousel div.
Works fine in IE and FF.
Any thoughts?
Thanks!
Hi Ganesh!
This has been incredibly easy to implement! However I have run into a problem when using the auto scroll. I have a small set of items that I’d like to feature that scroll automatically horizontally. However, instead of circular scrolling, when it gets to the last item it scrolls all the way to the end and then starts again. How can I fix this to make it less disjointed?
Hi Ganesh! Sorry false alarm, the above problem was a result of a clearing item under the list. However, I’d like to know if it’s possible to stop the carousel from scroll when a user hovers over an item?
Hi Ganesh
Is the plugin supposed to add inline style definitions to the divs, ul and li elements? I am finding that in Firefox it adds inline style, whilst in IE it doesn’t. Furthermore, the Firefox inline style is slightly different the first time the page is loaded to subsequent times. The differences are on the height and width. I’m only experiencing this behavior in one application. The test rig I used to train myself on it, doesn’t add inline style in either browser. Do you know of any condition that would trigger it to add inline style?
Many Thanks
Marcus
For people who has set the direction of the document to rtl, Jcarousel wont seems to work. A simple solution is to set style=”dir: ltr” to the parent of . It will start working again!
I hope someone here can help me figure out why, for me, it runs OK in Firefox 2, but I can’t get it to work at all on IE7. The test page is here: http://www.cobaltwolf.us/acuity/ke2/index.html
Thanks in advance. And thanks, Ganesh, for sharing this great script.
This is so sweet. One problem though, it doesn’t quite work with thickbox. The numbering in thickbox is off because of something the carousel is doing in the background. This would be a truly great plug in if you could get it to play nice with thickbox!
Hi!
The combination between realvideo and your carousel lite crash Firefox 3 on PC:
http://www.swissinfo.ch/fre/multimedia/video.html?siteSect=15045&ne_id=9249182&type=real&bcst=y&programId=15
It is a known issue?
Regards, Dom
Hi all,
I’m having problems getting jCarousel Lite working in IE6 & 7
Firefox works fine, but the unordered list does not get any styling
applied in IE
There are several recent posts to this issues blog that mention similar IE issues.
Has anyone else had issues with IE and found a fix? My markup is
below:
$(document).ready(function() {
$(”.jite”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible : 6,
scroll: 3
});
});
previous
next
I see this is a great plugin - but just can’t work out why its not working for me in IE.
Thanks in advance!
Regards
Sean
ah, I see the html has been lost in posting.
see http://groups.google.com/group/jquery-en/browse_frm/thread/c35a8fc88f783601/1f4ae6b57e97a5be?lnk=gst&q=+jCarousel+Lite+and+IE6%2F7#1f4ae6b57e97a5be
for the full posting on the jQuery group
TIA
Sean
Hi! I’m having some issues with a really irritating glitch - I’ve integrated the lightbox script so when I click an image it pops out - but if I click previous or next to scroll the carousel the lightbox code seems to be ignored randomly - not all the time, only for a few seconds or after repeated scrolling! Any ideas what may be causing this issue?
Hi!
jCarousel Lite is a great plug-in.
But one issues: carousel fail to initialise when it empty.
Fail on line 336 - return el[0].offsetWidth
There are no elements at all.
Dude,
Think I found a bug on the latest version of this script which affects Firefox v1.0. On line 239, where you set the li.css properties, the word float needs to be put in single quotes. Otherwise you get complete non-function in Firefox v1.
Hope this helps and thanks for a great script.
Is it possible to have two separate instances of jCarouselLite on the same page? I tried but it didn’t work…..
First off, I would like to say I really like this plug-in. I am new to jQuery, and found the plug-in easy to use. I am having a small problem though. I am interested in adding a title to each photo and have tried to do this with Title. When I do this the spacing between images disappears, and if I try to add margins or padding to the li elements in my CSS one or two of the images appear on a second line, below the rest of the images. I wasn’t sure if I was doing something wrong or if this is an issue with jCarouselLite. Thanks.
Great plug-in. BTW, can you stop the carousel once it’s running??
Hi, your lite version of jcarousel is really great but I wonder if we can have for the autoscrolling version, the images moving smoothly rather than image by image with keeping the arrow left and right functionnal?
Wanted to post a quick thanks. This plugin is amazing.
@Mark, you can have as many jcarousels on a page as you’d like. Check out www.aurorawdc.com. Just make sure you’ve got the classes/css unique between the carousels, and of course, reference those in your javascript.
I’ve been using jcarousel lite, and it’s been working really well - however, when there’s only 1 image in carousel, it doesn’t display at all. Seems to be something to do with the negative ‘left’ CSS property that is set by your script. Changing this value in Firebug shows the image - 3 times! Just thought I’d let you know.
Nice jquery package! I’m just having issues with: padding/spacing around images (I’ve tried several styles with no luck), and titles/captions for images. Demos show the former, so maybe publish you css file for all to see? And, is latter possible?
Thanks.
Hello,
I really need the previous and next to be hover events not clicks. I would like to hover over the next button and the carousel scolls until I hover off of the button, same with the previous button. Do you know of a easy way to do this with your code?
Thanks,
Eric T.
Hi,
it would be nice if you would make the click event based on the settings, like this:
if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).bind(o.event, function() {
return go(o.circular ? o.visible+i : i);
});
});
(for prev and next, too)
Great work!
I have been trying to integrate this into my gallery widget via NextGen Gallery. It did not work. I have removed it from my homepage and created a test page so you can see what I have going on:
http://www.emmafrostfiles.com/test.php
Let me know if I am doing any thing wrong, thanks.
Hello,
I like your plugin, because of how lightweight it is, and use it often. However, I have found a bug in the “circular” setting, when the start position is not 0, and the “previous” button is hit.
I have isolated and fixed the bug. See line 290 of this: http://wayfarerweb.com/js/jcarousellite.js (line starting: if(to
Hi.
I also encountered the problem of having different heighted content inside the carousel. I figured out that the height attributes on li-elements are causing this. By removing these, the height will be set by the tallest element. (btw. can you say that element is tall?)
I did this by changing the line #247 of 1.0.1 JCarousel Lite from:
li.css({width: li.width(), height: li.height()});
to
li.css({width: li.width()});
For our case this did the trick and haven’t yet seen any side effects of it. You can also try it with packed version by searching and removing the a part of text “,t:f.t()” without the quotes naturally.
Bug report:
I’m using jcarousel lite as part of a form. The user can select a design from a style-switcher, and I’m using it to allow them to spin through a number of radio options with embedded images of each design. Certain radio options are impossible to select. I imagine this is due to the plug-in duplicating the input/labels.
great plug-in! i’d be lost without it.
please answer ted’s question above as soon as possible:
(#111: …Everything works and looks fine. But if you add “overflow:auto” or “overflow:scroll” into the CSS, it messes up the animation. Adding “overflow:hidden” doesn’t affect the animation.)
i’m having the same problem! i have a div set to “overflow: auto;” and when it moves left or right, it ends up staying on screen well outside of the container and . thank you in advance.
i’ve discovered a way around the “overflow: auto;” scrollbar problem and that is to make us of the jScrollPane plug-in:
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
I just love this plugin! Thanks!!
I have however an issue that others have already mentioned above. IE7 expands to enclose all images and of course this makes them all visible. Overflow set to hidden does not do anything. Help!?
Hi
This is really good tool.
But I have the problem:
I use the carousel inside an . And when the frame content is loaded first time, then carousel is displayed incorrect. It doesn’t work. I suppose that the problem is in the sequence of loading, but don’t know how can I fix it.
When I refresh the frame then it works fine.
Super Cool jQuery plugin! This saved me when the original jCarousel failed me, hehe. There is one missing though, I needed a feature that scrolls the carousel on mouseover event and stops it on mouseout (with buttons Next and Previous). To those who needs the same feature, this is my work around for it. Add this somewhere in jcarousel lite script near line 250:
if(o.btnPrev)
$(o.btnPrev).mouseover(function() {
prevInterval = setInterval(function() {
go(curr-o.scroll);
}, 1000); // put desired interval here
});
if(o.btnNext)
$(o.btnNext).mouseover(function() {
nextInterval = setInterval(function() {
go(curr+o.scroll);
}, 1000); // put desired interval here
});
if(o.btnPrev)
$(o.btnPrev).mouseout(function() {
clearInterval(prevInterval);
});
if(o.btnNext)
$(o.btnNext).mouseout(function() {
clearInterval(nextInterval);
});
This works for me but I hope we can have this in your next update
Hi, I think my issue may have been mentioned in part, but I have a strange bug.
I am loading external images into the carousel dynamically with AJAX. I’ve got it to build the carousel fine, and it scroll’s through the images great as well.
The only issue is when you go to a previous image it jumps to the first image and then scrolls forward through each image until it reaches the original “previous image”. And sometimes it seems to just go to whichever image it feels like.
Obviously it’s something to do with loading the images with AJAX, but if you have any idea’s that would be brilliant!
An example is on http://beta.wisheroo.com/image-fetch-example.php. Just insert a URL into the text box and click “Create!”
Very nice plugin (and the best thing is that it is realy light!). I had a problem thought but I don’t know if it has to do with the plugin or the jQuery library itself.
I’m using the 1.2.6 version of jQuery and when I try to init the jCaruselList I get an “uncaught exception: Node cannot be inserted at the specified point in the hierarchy”.
I see this error on Firebug console only when I use circular mode. I’ve checked the code and I can see that the problem was near line 230:
if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}
if you change that with:
if(o.circular) {
tLi.slice(tl-v-1+1).clone().prependTo(ul);
tLi.slice(0,v).clone().prependTo(ul);
o.start += v;
}
the problem goes away!
Great lib! When using the “Auto Scroll” is there away to pause the scrolling. For example when you mouseover an image. The reason i ask i because i show a tooltip description of the image when you hover.
the Jcarousel doesn’t work with lightbox V2… can you confirme this?
Well, there is a mistake in my the code, so change the
tLi.slice(0,v).clone().prependTo(ul);
with
tLi.slice(0,v).clone().appendTo(ul);
@Danie: There is no such thing built in. I needed something like that and had to add some code.
@ben: Are you using Lightbox that uses prototype library? try using lightbox for jQuery, that might work
@ben: Are you using Lightbox that uses prototype library? try using lightbox for jQuery, that might work
Hello,
Has anyone managed to supply jCarousel with automatic scrolling, bound to mouseover, so that the closer the cursor is to either edge of the scrolled area, the largest the scrolling velocity (yet without wrapping/cycling the contents past the first/last item)? Willing to share a demo?
Of course, the velocity ratio should be configurable so that the widget is friendly and not a pesky nightmare…
Best to everyone,
~ipod
The installation page instructions do not result in a working Carousel. Following the instructions, the page displays a plain list of all images along with two non-working buttons.
Does anyone have a basic installation guide with all required css and other code? I have tried (and failed) to dissect the working carousel code on this site. Is there a more complete basic guide that explains a full working installation?
Thank you.
Okay well, nevermind. I have it working now after looking at your pages in different broswers.
Here’s a simple HTML/CSS Demo For Dummies, based on the code from this Ganesh:
http://www.mediafire.com/?g1skwnexz10
You will also need these two files:
jcarousellite_1.0.1.pack.js
jquery-1.2.6.pack.js
Good luck.
I am a total noob with JS, but I managed to get a crude pause on hover going.
I replaced:
if(o.auto) //line 274 in jcarousellite_1.0.1.js
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
with:
if(o.auto)
var refreshId = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
$(”.carousel”).hover(
function() {
clearInterval(refreshId)
},
function() {
refreshId = setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);
}
);
This is surely a very crude way of doing it, but it seems to work.
Now I only need to find out how to make it fade between images instead of slide them.
I know I probably could use another plugin for these things, but I’m using this as a learning exercise.
Just wanted to let you know that if this plugin is used along with the Tabs-UI plugin, you must call tabs() AFTER you call jCarouselLite() otherwise IE and Flock will display a carousel with no height or width and all images hidden.
Hi TwiiK, are you sure the code to pause it is correct? I can’t put it to work!
Thanks
great plugin !! one question how can I assign an other class to the prev or next button when the cycle is set to false so that I can give feedback that that was the last or first photo or text. thnx
found it … sorry class “disabled”
This plugin is really awesome. However, like most people, I also needed the pause option when auto scroll is set. I created a new parameter called “pauseOnHover” which does exactly as you would think. It’ll also stop the scroll when a user is clicking the button. Here’s the minified code, enjoy!
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false, auto:null,pauseOnHover:true,speed:200,easing:null,vertical:false, circular:true,visible:3,start:0,scroll:1, beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?”top”:”left”,sizeCss=o.vertical?”height”:”width”;var div=$(this),ul=$(”ul”,div),tLi=$(”li”,ul),tl=tLi.size(),v=o.visible;var isMouseOver=false;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v;}var li=$(”li”,ul),itemLength=li.size(),curr=o.start;div.css(”visibility”,”visible”);li.css({overflow:”hidden”,float:o.vertical?”none”:”left”});ul.css({margin:”0″,padding:”0″,position:”relative”,”list-style-type”:”none”,”z-index”:”1″});div.css({overflow:”hidden”,position:”relative”,”z-index”:”2″,left:”0px”});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width(),height:li.height()});ul.css(sizeCss,ulSize+”px”).css(animCss,-(curr*liSize));div.css(sizeCss,divSize+”px”);li.mouseover(function(){isMouseOver=true;});li.mouseout(function(){isMouseOver=false;});if(o.btnPrev){$(o.btnPrev).mouseover(function(){isMouseOver=true;});$(o.btnPrev).mouseout(function(){isMouseOver=false;});$(o.btnPrev).click(function(){return go(curr-o.scroll);});}if(o.btnNext){$(o.btnNext).mouseover(function(){isMouseOver=true;});$(o.btnNext).mouseout(function(){isMouseOver=false;});$(o.btnNext).click(function(){return go(curr+o.scroll);});}if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i);});});if( o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll);});if(o.auto)setInterval(function(){if(o.pauseOnHover&&isMouseOver)return;go(curr+o.scroll);},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v);};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to=itemLength-v+1){ul.css(animCss,-((v)*liSize)+”px”);curr=to==itemLength-v+1?v+1:v+o.scroll;}else curr=to;}else{if(toitemLength-v)return;else curr=to;}running=true;ul.animate(animCss==”left”?{left