This snippet is nothing but a simple div containing an unordered list of images.
The "carousel" class for the div here is just for the sake of explanation.
You can use any class — or none at all — for any of the elements.

To manually navigate the elements of the carousel, you can include some kind of navigation buttons.
For example, you can have a "previous" button to go backward and a "next" button to go forward.
They need not be part of the carousel div itself; they can be any element in your document.
For example, let's assume you want the following elements to be used as prev and next buttons:

Demo

Options

containerSelector : string - default is "ul"

New as of jCarouselLite 1.9. Allows the "ul" container to be customized using any valid selector expression to match elements against. The plugin will use the first element within the carousel div that matches the selector.

itemSelector : string - default is "li"

New as of jCarouselLite 1.9. Allows the "li" slides to be customized using any valid selector expression to match elements against. The plugin will use elements that match the itemSelector string and are direct children of the containerSelector.

swipe : Boolean - default is true

New as of jCarouselLite 1.8. Enables the carousel to respond to touch input — namely single-touch swiping motions.

swipeThresholds : Object - default is { x: 80, y: 120, time: 150 }

New as of jCarouselLite 1.8 The three swipeThresholds properties refer to movement along the x and y axes (in pixels) and the duration of that movement (in milliseconds) from touch start to touch end. The combination of these properties determine when a directional swipe has occurred and, thus, when the carousel should scroll.

preventTouchWindowScroll: Boolean - default is true

When true (default), prevents vertical scrolling of the document window when swiping on a horizontal carousel.

btnPrev, btnNext : String - no defaults

btnGo : array | jQuery object - no defaults

You can use the btnGo option along with the btnNext / btnPrev buttons or instead of them.

If you supply an array, the index of each item in the array represents the index of the element in the carousel.
In other words, if the first element in the array is ".one," then clicking the element represented by ".one"
will slide the carousel to the first element.

In the following example, clicking a link within #carousel-nav will slide the carousel to the item with an index matching the link's index among the other links.

$('div.carousel').jCarouselLite({
btnGo: $('#carousel-nav a')
});

autoCSS : Boolean - default is true

When the autoCSS option is set to false, the plugin does not set any of the initial styles on the carousel elements, allowing you to apply these styles (or a subset of them) yourself in a stylesheet.

$('div.carousel').jCarouselLite({
autoCSS:false
});

The following is a generic example of styles set by the plugin when the default autoCSS: true is used.

/* the selectors here (div, ul, li) are meant only for example. you would, of course, use more specific selectors to target your actual carousel elements */div {
visibility: visible;
position: relative;
z-index: 2;
/* if the vertical option is set to true, the following would be height */width: XXX /* calculated: width of the first li * number of visible items */;
}
ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
z-index: 1;
/* if the vertical option is set to true, the following would be height *//* can be any number larger than total combined width of list items */width: XXX /* calculated: width of the first li * total number of list items */;
/* if the vertical option is set to true, the following would be margin-top */margin-left: -XXX /* calculdated: -starting item * width of first li */;
}
li {
overflow: visible /* if vertical: true, overflow is hidden */;
float: left /* if vertical: true, float is none */;
width: XXX /*calculated: width of the first li */
height: XXX /*calculated: height of the first li */
}

autoWidth: Boolean - default is false

When the autoWidth option is set to true, the plugin sets the width of
the <li>s and left/top of the <ul> based on the width of the <div>

btnDisabledClass: String - default is "disabled"

The btnDisabledClass value is automatically added to the btnPrev or btnNext element when a non-circular carousel is at the first or last slide, respectively.

activeClass : String - default is "active"

The activeClass value is automatically added to the active slide's class. This allows customized animations within the beforeStart and beforeEnd callback options.

When the btnGo option is set, the element in the btnGo set that corresponds to the first currently visible carousel item will have a class added to it. The default activeClass is "active," but this can be overridden as shown in the following example:

visibleClass : String - default is "vis"

When the btnGo option is set, the element in the btnGo set that corresponds to the currently visible carousel item(s) will have a class added to them. The default visibleClass is "vis," but this can be overridden as shown in the following example:

The carousel will navigate by itself if this option is set to true or a number greater than 0. If true, the carousel will scroll by the number of slides indicated by the scroll option (default is 1). If a positive number, it will auto-scroll by that number instead, although clicks on the previous/next button will still cause it to scroll by the scroll option's number.

pause: Boolean - default is true

When both pause and auto are true, scrolling will pause when the mouse enters the carousel and resume when the mouse leaves the carousel.

directional: Boolean - default is false

If the directional option is set to true, autoscrolling changes direction when the user clicks the "previous" or "next" button

timeout : Number - default is 4000

When the auto option is set to true (or a number greater than 0), the carousel automatically transitions after the amount of time specified by the timeout option.

$('div.carousel').jCarouselLite({
auto:true,
timeout:8000
});

autoStop : Number - default is Infinity

The number of iterations before an auto carousel will stop automatically advancing. If the circular option is set to false, the carousel will not continue advancing after the last item has been reached, even if the number of iterations has not yet reached the autoStop value.

speed : Number - default is 200

Specifying a speed will slow down or speed up the sliding speed of your carousel. Providing 0 will remove the slide effect.

easing : String - no easing effects by default.

The default easing of jQuery core, "swing," is used if no easing is specified in the options. You will need an easing plugin if you wish to specify an easing effect other than jQuery's own "swing" or "linear."

vertical : Boolean - default is false

Determines the direction of the carousel. If set to true, the carousel will display vertically; the next and
prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
display horizontally. The next and prev buttons will slide the items from left to right in this case.

circular : Boolean - default is true

Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
element, you will automatically slide to the first element and vice versa. If you set circular to false, then
if you click on the "next" button after you reach the last element, you will stay in the last element itself
and similarly for "previous" button and first element.

scroll : Number - default is 1

The number of items that should scroll/slide when you click the next/prev navigation buttons. By
default, only one item is scrolled, but you may set it to any number. For example, setting it to 2 will scroll
2 items when you click the next or previous buttons.

first, last : Function - callbacks

When the circular option is set to false you have the option of doing something once the first or last slide has been reached via callbacks.

$('div.carousel').jCarouselLite({
btnNext:'.next',
btnPrev:'.prev',
first:function() {
alert('This is the first slide');
},
last:function() {
alert('This is the last slide');
}
});

beforeStart, afterEnd : Function - callbacks

If you want to do some logic before the slide starts and after the slide ends,
you can register these 2 callbacks. Inside the functions, this is the
div on which the .jCarouselLite() method is called.
The functions will be passed three arguments:

Object containing information that differs depending on what triggered the advance. If triggered by clicking one of the btnGo elements, for example, the object has two properties: btnGo, which references the clicked DOM element, and btnGoIndex, presenting the index of the clicked DOM element in relation to the other "btnGo" buttons.

Events

The plugin binds a few custom event handlers to the wrapping div element. They can be triggered at any time by using jQuery's event triggering mechanism. If other custom events are bound to the same elements, you may wish to trigger these using the .jc namespace. For example, instead of .trigger("pauseCarousel"), you could write .trigger("pauseCarousel.jc").

pauseCarousel

Pauses an autoscrolling carousel until resumeCarousel is triggered. Note: if the pause option is set to true, then the resumeCarousel event is automatically triggered when the mouse leaves the carousel div.

$('div.carousel').trigger('pauseCarousel')

resumeCarousel

Resumes an autoscrolling carousel after having been paused.

$('div.carousel').trigger('resumeCarousel')

stopCarousel

Stops an autoscrolling carousel in a similar fashion to pauseCarousel, with the exception that resumeCarousel will NOT resume the carousel, and neither will the mouse leaving the carousel div. To resume automatic movement on the carousel, use startCarousel.

$('div.carousel').trigger('stopCarousel')

endCarousel

Stops the carousel from functioning and removes all events and data bound by the plugin.

refreshCarousel

Updates the dimensions of the carousel and, optionally (as of 1.9.1), the plugin's record of items being used in the carousel. When the responsive option is set to true, the refreshCarousel event is triggered automatically when the window stop resizing (it is "debounced" so it doesn't occur repeatedly during resize).

// Insert a slide into the carousel.// Then...
$('div.carousel').trigger('refreshCarousel', '[all]')