Nesquik,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<base href="http://www.gmarwaha.com/jquery/jcarousellite/" />
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function (d) {
function g(a, e) {
return parseInt(d.css(a[0], e)) || 0
}
function u(a) {
return a[0].offsetWidth + g(a, "marginLeft") + g(a, "marginRight")
}
function v(a) {
return a[0].offsetHeight + g(a, "marginTop") + g(a, "marginBottom")
}
d.fn.jCarouselLite = function (a) {
a = d.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: !1,
auto: null,
speed: 200,
easing: null,
vertical: !1,
circular: !0,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, a || {});
return this.each(function () {
function e(h) {
if (!g) {
a.beforeStart && a.beforeStart.call(this, f.slice(b).slice(0, c));
if (a.circular) h <= a.start - c - 1 ? (k.css(q, -((l - 2 * c) * m) + "px"), b = h == a.start - c - 1 ? l - 2 * c - 1 : l - 2 * c - a.scroll) : h >= l - c + 1 ? (k.css(q, -(c * m) + "px"), b = h == l - c + 1 ? c + 1 : c + a.scroll) : b = h;
else {
if (0 > h || h > l - c) return;
b = h
}
g = !0;
k.animate("left" == q ? {
left: -(b * m)
} : {
top: -(b * m)
}, a.speed, a.easing, function () {
a.afterEnd && a.afterEnd.call(this, f.slice(b).slice(0, c));
g = !1
});
a.circular || (d(a.btnPrev + "," + a.btnNext).removeClass("disabled"), d(0 > b - a.scroll && a.btnPrev || b + a.scroll > l - c && a.btnNext || []).addClass("disabled"))
}
a.auto && (s = window.setTimeout(function () {
e(b + a.scroll)
}, a.auto + a.speed));
return !1
}
var g = !1,
q = a.vertical ? "top" : "left",
t = a.vertical ? "height" : "width",
n = d(this),
k = d("ul", n),
p = d("li", k),
r = p.size(),
c = a.visible;
a.circular && (k.prepend(p.slice(r - c - 1 + 1).clone()).append(p.slice(0, c).clone()), a.start += c);
var f = d("li", k),
l = f.size(),
b = a.start,
s;
n.css("visibility", "visible");
f.css({
overflow: "hidden",
"float": a.vertical ? "none" : "left"
});
k.css({
margin: "0",
padding: "0",
position: "relative",
"list-style-type": "none",
"z-index": "1"
});
n.css({
overflow: "hidden",
position: "relative",
"z-index": "2",
left: "0px"
});
var m = a.vertical ? v(f) : u(f),
p = m * l,
r = m * c;
f.css({
width: f.width(),
height: f.height()
});
k.css(t, p + "px").css(q, -(b * m));
n.css(t, r + "px");
a.btnPrev && d(a.btnPrev).click(function () {
return e(b - a.scroll)
});
a.btnNext && d(a.btnNext).click(function () {
return e(b + a.scroll)
});
a.btnGo && d.each(a.btnGo, function (b, c) {
d(c).click(function () {
return e(a.circular ? a.visible + b : b)
})
});
a.mouseWheel && n.mousewheel && n.mousewheel(function (c, d) {
return 0 < d ? e(b - a.scroll) : e(b + a.scroll)
});
a.auto && e(b + a.scroll);
d(this).hover(function () {
window.clearTimeout(s)
}, function () {
a.auto && e(b + a.scroll)
})
})
}
})(jQuery);</script>
<script>$(document).ready(function(){
$(".default .jCarouselLite").jCarouselLite({
auto: 300,
speed: 1000
});
});
</script>
</head>
<body>
<div class="carousel default">
<div class="jCarouselLite">
<ul>
<li><img src="image/1.jpg" alt="" width="150" height="118"></li>
<li><img src="image/2.jpg" alt="" width="150" height="118"></li>
<li><img src="image/3.jpg" alt="" width="150" height="118"></li>
<li><img src="image/4.jpg" alt="" width="150" height="118"></li>
<li><img src="image/5.jpg" alt="" width="150" height="118"></li>
<li><img src="image/6.jpg" alt="" width="150" height="118"></li>
<li><img src="image/7.jpg" alt="" width="150" height="118"></li>
<li><img src="image/8.jpg" alt="" width="150" height="118"></li>
<li><img src="image/9.jpg" alt="" width="150" height="118"></li>
<li><img src="image/10.jpg" alt="" width="150" height="118"></li>
<li><img src="image/11.jpg" alt="" width="150" height="118"></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="carousel default">
<div class="jCarouselLite">
<ul>
<li><img src="image/1.jpg" alt="" width="150" height="118"></li>
<li><img src="image/2.jpg" alt="" width="150" height="118"></li>
<li><img src="image/3.jpg" alt="" width="150" height="118"></li>
<li><img src="image/4.jpg" alt="" width="150" height="118"></li>
<li><img src="image/5.jpg" alt="" width="150" height="118"></li>
<li><img src="image/6.jpg" alt="" width="150" height="118"></li>
<li><img src="image/7.jpg" alt="" width="150" height="118"></li>
<li><img src="image/8.jpg" alt="" width="150" height="118"></li>
<li><img src="image/9.jpg" alt="" width="150" height="118"></li>
<li><img src="image/10.jpg" alt="" width="150" height="118"></li>
<li><img src="image/11.jpg" alt="" width="150" height="118"></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
