jCarousel Lite: DHTML image slideshows with 2kb of code

Brian Dillard, Tuesday, February 26, 2008 @ 2:41 pm

After posting last week about the strengths and limitations of jCarousel, the jQuery image-carousel plug-in, I did some digging and found jCarousel Lite, another option for your image-slideshow needs. Written and maintained by Ganeshji Marwaha, jCarousel Lite is optimized for size and simplicity rather than configurability. It weighs in at just 2kb, but you lose a lot of the more advanced options you get with jCarousel, such as Ajax slideshows and integration with Thickbox. Still, for plain-vanilla DHTML slideshows, jCarousel Lite offers a fast and lightweight solution that requires very little custom code.

To build your slideshow, you just structure your images into an unordered list, the same way you would with jCarousel:

<div id="mySlideshow">
    <ul>
        <li><img src="image1.jpg" alt="image 1" width="200" height="200" ></li>
        <li><img src="image2.jpg" alt="image 2" width="200" height="200" ></li>
        <li><img src="image3.jpb" alt="image 3" width="200" height="200" ></li>
        <li><img src="image4.jpg" alt="image 4" width="200" height="200" ></li>
        <li><img src="image4.jpg" alt="image 5" width="200" height="200" ></li>
        <li><img src="image5.jpg" alt="image 6" width="200" height="200" ></li>
        <li><img src="image6.jpb" alt="image 7" width="200" height="200" ></li>
        <li><img src="image7.jpg" alt="image 8" width="200" height="200" ></li>
    </ul>
</div>

Then create a couple of buttons (or links, or any clickable DOM element) for your "back" and "forward" controls:

<button class="previous">previous</button>
<button class="next">next</button>

Then add your libraries and a single custom JavaScript block to the head of your document, plugging in selectors for the unordered list and buttons you just created:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarouselLite.js"></script>
<script>
$(document).ready(function() {
	$("#mySlideshow").jCarouselLite({
		btnPrev: ".previous",
		btnNext: ".next",
		/*this makes it a true carousel rather than a slideshow*/
		circular: true
	});
});
</script>

It's not rocket science, is it?

Unlike jCarousel, which comes with a set of prepackaged CSS "themes," jCarousel Lite requires you to write your own custom CSS to control the look and feel of your slideshow. In my experience, that isn't a bad thing. With jCarousel, the minute you deviate from the built-in themes' assumptions about the sizes of your images, you're basically rewriting most of the CSS, anyway. So why not just start from scratch and build up exactly the look and feel that you want for your site?

agile ajax

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Hi,

   How do i add text , Like Caption at the Bottom of each image? and Space between Images. I am trying to Build something like in Amazon.com. I appreciate any Help.

   Comment by PK, Thursday, October 9, 2008 @ 11:07 am

Leave a comment