jCarousel Lite is actually a stripped down version of the original jCarousel jQuery plugin, with lesser ability but more simplicity. It’s a perfect solution for those who are trying to easily make an image scroller using jQuery, it only weights around 2KB, which means you don’t have to go through a lot of coding stuff to get started. But then again, the one thing that always bothered me is that even though the basic goal was to release something real simple and feather-weight, the simplicity don’t really come in handy for most people because of the poor documentation(no offence, it could be just me). So here I am, with a not-really-pro tutorial on how you could make and style an image scroller using jCarousel Lite.

The very first thing you’ll need is the jQuery Library to run jCarousel Lite, for your convenience, I’ve put together a download package with both of them in it. You can download it from HERE (118KB). You’ll find them in the js folder once you have unzipped the package, it also contains an example image scroller which you can start using right away. Now, let’s move on to the tutorial.

You’ll most likely be able to to figure out everything yourself once you have downloaded the package, I’ll just explain some bits and pieces of the things that you’ll find in the package.

First of all, open up jc.php from the package you just downloaded, this is the file that contains the HTML codes for the gallery itself. Now start paying attention from the 7th line, you’ll see something like this:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

This is the part where you call the CSS file (included in the package), you’ll need it to change/set the look of your jCarousel Lite image scroller.

Moving on to the the next part, 8th and 9th line to be specific, you’ll see two lines like the following:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jcarousellite.js”></script>

This is the part that calls both the jQuery library and the jCarousel Lite javascript file to execute the rest of the HTML, so don’t mess them up, be careful when you put in the the path.

Now, take a look at the most crucial part, do you see something like this?

<script>
$(document).ready(function() {
$(”.widget_style”).jCarouselLite({
btnPrev: “.previous”,
btnNext: “.next”,
/*this makes it a true carousel rather than a slideshow*/
circular: true
});
});
</script>

This is the part where the official jCarousel Lite Documentation gets the non-tech guys really confused, even though they thoroughly explain the options, they don’t explain how they can be used in an HTML file, and it doesn’t tell you that you need to put $(document)…………..}); within a <script> tag to make things work. Anyway, notice the .widget_style part on the 3rd line? It’s the CSS class we’ll be using to style the scroller, the next two lines also sets the CSS class for the previous and next button, so don’t mix them up. Moving on to the 7th line, I’ve used circular option to make it a true Carousel, this means, if you click “next” after you reach the last element, you will automatically slide to the first element and vice versa. kappish?

Let’s talk about the easier part now:

<div class=”widget”>

<a href=”#” class=”previous”></a>

<div class=”widget_style”>
<ul>
<li><img src=”http://proclubbd.com/pix/1.jpg” alt=”image 1″></li>
<li><img src=”http://proclubbd.com/pix/2.jpg” alt=”image 2″></li>
<li><img src=”http://proclubbd.com/pix/5.jpg” alt=”image 3″></li>
<li><img src=”http://proclubbd.com/pix/4.jpg” alt=”image 4″></li>
</ul>
</div>

<a href=”#” class=”next”></a>

</div>

Here’s where you setup the gallery itself and add/remove the images. I’ve used 4 images, but you can use as many as you like. Oh, notice the second line from both the top and the bottom? These are for the previous and next buttons.

CSS Styling

Open up the style.css file from the download package, if it hasn’t got corrupted during download, you’ll see the following codes in it. I haven’t tested the codes on all browsers, but you’ll get the idea. Let me just comment out the CSS classes so that you understand which part does what.

/*Class to set the width for the whole Carousel. You can set the width and height as you want */

.widget {
width:419px;
}

/*Class to set the styling option for the previous button on the Carousel */

.widget a.previous{
float:left;
display:block;
background:url(images/prev.jpg) bottom;
width:34px;
height:34px;
margin-top:28px;
margin-right:2px;
}

/*Class to set the styling option for the next button on the Carousel */

.widget a.next{
float:right;
display:block;
background:url(images/next.jpg) bottom;
width:34px;
height:34px;
margin-top:-71px;
}

/*Class to set the styling option for the scroller part of the Carousel */

.widget_style {
text-align:left;
padding:0px 0px 0px 0px;
}

.widget_style ul {
margin:0;
padding:0;
}

/*Class to set the image background and the size of it, do note that it’s not the size of the scrolling images, it sets the size of the background image that I’ve used for every actual image that will be scrolling*/

.widget_style li {
height:89px;
width:109px;
background:url(images/imgbg.jpg) left top no-repeat;
list-style:none;
margin:0;
padding:10px 0px 0px 10px;
}

/*This here actually sets the size of the scrolling images */

.widget_style img {
width:90px;
height:70px;
}

Care to look at the outcome? Click Here.