Default styling

A basic setup requires us to provide some HTML markup and to invoke the jCarouselLite plugin. That's all !!!

The plugin takes care of styling various carousel items to nicely line up horizontally or vertically. It sizes the carousel based on visible items (but you have to provide the dimensions of individual items). It does a few more things as well to handle compatibility between different browsers. HTML, CSS and JS for such a basic setup is show below.

• HTML
• CSS
• JS

<button class="prev-no-style">&laquo;</button>
<button class="next-no-style">&raquo;</button>

<div class="carousel-no-style">
    <ul>
        <li><img src="image/1.jpg" style="width:130px; height:118px;"></li>
        <li><img src="image/2.jpg" style="width:130px; height:118px;"></li>
        <li><img src="image/3.jpg" style="width:130px; height:118px;"></li>
        <li><img src="image/4.jpg" style="width:130px; height:118px;"></li>
        <li><img src="image/5.jpg" style="width:130px; height:118px;"></li>
    </ul>
</div>

/*
    Nothing to show here
*/

$(".carousel-no-style").jCarouselLite({
    btnNext: ".next-no-style",
    btnPrev: ".prev-no-style"
});

Output for the above setup is shown below. It doesn't look great, but it works and works well. Try clicking the » and « buttons to navigate.

The only style information that you had to provide was the carousel item's width and height - in this case <img src="image/1.jpg" style="width:130px; height:118px;">. That information is crucial to initialize the carousel. So, don't forget to provide that.

Custom styling

But what if you want to style the carousel differently? You may want to add some rounded corners, some spacing between items and maybe some background colors. The plugin does not restrict you from doing any such styling using regular CSS. Given below is an example of one such styled carousel.

• HTML
• CSS
• JS

<div class="custom-container basic2">
    <a href="#" class="prev">&lsaquo;</a>
    <div class="carousel">
        <ul>
            <li><img src="image/1.jpg"></li>
            <li><img src="image/2.jpg"></li>
            <li><img src="image/3.jpg"></li>
            <li><img src="image/4.jpg"></li>
            <li><img src="image/5.jpg"></li>
        </ul>
    </div>
    <a href="#" class="next">&rsaquo;</a>
    <div class="clear"></div>
</div>

#jcl-demo .carousel {
    border: 1px solid #bababa;
    border-radius: 10px;
    background-color: ghostwhite;
    float: left;
    padding-left: 10px;
}
    #jcl-demo .carousel>ul>li>img {
        width: 150px;
        height: 118px;
        vertical-align:middle;
        margin: 10px 10px 10px 0;
        border-radius: 5px;
    }

#jcl-demo a.prev, #jcl-demo a.next {
    display: block;
    width: 26px;
    height: 30px;
    line-height: 1;
    background-color: #333333;
    color: ghostwhite;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 25px;
    border-radius: 8px;
    float: left;
}
    #jcl-demo a.prev {
        margin: 50px -5px 0 0; text-indent: 7px;
    }
    #jcl-demo a.next {
        margin: 50px 0 0 -5px; text-indent: 10px;
    }
        #jcl-demo a.prev:hover, #jcl-demo a.next:hover {
            background-color: #666666;
        }

$(".basic2 .carousel").jCarouselLite({
    btnNext: ".basic2 .next",
    btnPrev: ".basic2 .prev"
});

In the CSS tab you will notice that the bulk of the styling was for next and prev buttons. The carousel is also styled with proper padding, margins, background colors and rounded corners to show what is possible.

Now that you understand the difference between the default styling and custom styling, you can easily understand the rest of the Demos. Since every demo uses a similar CSS styling and HTML markup, I will be showing only the JS code for them. You can always view-source if you want. :-)