jCarousel Lite – A jQuery plugin August 9th, 2007
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
Did I mention that it weighs just 2 KB?
As if that wasn’t enough, the best part is yet to come… You don’t need any special css file or class name to get this to work. Include the js file. Supply the HTML markup. Then, construct the carousel with just a simple function call.
Visit the project page for more information. There you can find a lot of demos and exhaustive documentation. This blog entry is just a teaser for further exploration.
Installing and getting it to work is as trivial as following the 3 steps given below…
Step 1:
Include a reference to the jQuery library and the jCarouselLite plugin. If you like interesting effects, include the Easing plugin as well (Optional). If you would like to navigate the carousel using mouse wheel, then include the mouse-wheel plugin as well (Optional).
<script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> <!-- Optional --> <script type="text/javascript" src="path/to/easing.js"></script> <script type="text/javascript" src="path/to/mousewheel.js"></script>
Step 2:
In your HTML file, provide the markup required by the carousel (a “div” enclosing an “ul”). You also need the navigation buttons, but these buttons need not be part of the carousel markup itself. An example follows…
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
<li><img src="someimage" alt="" width="100" height="100" ></li>
</ul>
</div>
Step 3:
Fire a call to the plugin and supply your navigation buttons. You just managed to architect your own carousel.
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
If you have any comments/suggestions/requests, feel free to drop in a comment or you can find me lurking around the jquery mailing list.
Update
Based on popular request, jCarouselLite has been updated to support jquery 1.2.x versions. Goto the download page and download version 1.0.1 to enjoy jquery 1.2.x support. Since Firefox 3 has some issues with $(document).ready() function, try using $(window).load() instead if you face any problems. Hopefully a future version of Firefox or jQuery will fix the problem.
Hi.
Sorry but i do not know where to add the trigger function shown in the instructions as part 3?
Can you please add a working example that allows me to look at the code.
regards
I am using this to create a vertical news ticker.
It is cutting off the words after the 4th sentance.
Is there a way to control this?
(Basically the height of the li
THanks
I am using this to create a picture slider
Now I has a problem to devide the visibal num into 2 line,not just one line
How can I do?
Hi there thanks for jCarouselLite. I have a problem with a simple scroll with a single panel that says “Uncaught TypeError: Object # has no method ‘jCarouselLite’”. Where can be the problem?
This is my code definition:
(’.panel_style’).jCarouselLite({
btnNext: “.bd”,
btnPrev: “.ba” ,
btnGo: [
".conteo_style .b1",
".conteo_style .b2",
".conteo_style .b3",
".conteo_style .b4"
],
visible:1,
scroll: 1
});
Thanks,
Lorenzo
Hi,
Would it be possible to set a cookie to remember currently selected menu item?
Thanks for a really good (and small!) plugin
Amazing code … thanks!
Small problem … I have some spacing between my items:
http://www.realkana.com/iphone/
When it scrolls, the (blank) space below the last item is included in the scroll region, so the new item that’s scrolling up into position appears before I want it to. Is there any way to work around this? I tried a few CSS ideas but failed
Let me know if the above isn’t clear … a bit hard to describe.
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.