(function($) { // compliant with jquery.noconflict() $.fn.jcarousellite = function(o) { o = $.extend({ btnprev: null, btnnext: null, btngo: null, mousewheel: false, auto: null, speed: 200, easing: null, vertical: false, circular: true, visible: 3, start: 0, scroll: 1, beforestart: null, afterend: null }, o || {}); return this.each(function() { // returns the element collection. chainable. var running = false, animcss=o.vertical?"top":"left", sizecss=o.vertical?"height":"width"; var div = $(this), ul = $("ul", div), tli = $("li", ul), tl = tli.size(), v = o.visible; if(o.circular) { ul.prepend(tli.slice(tl-v-1+1).clone()) .append(tli.slice(0,v).clone()); o.start += v; } var li = $("li", ul), itemlength = li.size(), curr = o.start; div.css("visibility", "visible"); li.css({overflow: "hidden", float: o.vertical ? "none" : "left"}); ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); div.css({position: "relative", "z-index": "2", left: "0px"}); var lisize = o.vertical ? height(li) : width(li); // full li size(incl margin)-used for animation var ulsize = lisize * itemlength; // size of full ul(total length, not just for the visible items) var divsize = lisize * v; // size of entire div(total length for just the visible items) li.css({width: li.width(), height: li.height()}); ul.css(sizecss, ulsize+"px").css(animcss, -(curr*lisize)); div.css(sizecss, divsize+"px"); // width of the div. length of visible images if(o.btnprev) $(o.btnprev).click(function() { return go(curr-o.scroll); }); if(o.btnnext) $(o.btnnext).click(function() { return go(curr+o.scroll); }); if(o.btngo) $.each(o.btngo, function(i, val) { $(val).click(function() { return go(o.circular ? o.visible+i : i); }); }); if(o.mousewheel && div.mousewheel) div.mousewheel(function(e, d) { return d>0 ? go(curr-o.scroll) : go(curr+o.scroll); }); if(o.auto) setinterval(function() { go(curr+o.scroll); }, o.auto+o.speed); function vis() { return li.slice(curr).slice(0,v); }; function go(to) { if(!running) { if(o.beforestart) o.beforestart.call(this, vis()); if(o.circular) { // if circular we are in first or last, then goto the other end if(to<=o.start-v-1) { // if first, then goto last ul.css(animcss, -((itemlength-(v*2))*lisize)+"px"); // if "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements. curr = to==o.start-v-1 ? itemlength-(v*2)-1 : itemlength-(v*2)-o.scroll; } else if(to>=itemlength-v+1) { // if last, then goto first ul.css(animcss, -( (v) * lisize ) + "px" ); // if "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements. curr = to==itemlength-v+1 ? v+1 : v+o.scroll; } else curr = to; } else { // if non-circular and to points to first or last, we just return. if(to<0 || to>itemlength-v) return; else curr = to; } // if neither overrides it, the curr will still be "to" and we can proceed. running = true; ul.animate( animcss == "left" ? { left: -(curr*lisize) } : { top: -(curr*lisize) } , o.speed, o.easing, function() { if(o.afterend) o.afterend.call(this, vis()); running = false; } ); // disable buttons when the carousel reaches the last/first, and enable when not if(!o.circular) { $(o.btnprev + "," + o.btnnext).removeclass("disabled"); $( (curr-o.scroll<0 && o.btnprev) || (curr+o.scroll > itemlength-v && o.btnnext) || [] ).addclass("disabled"); } } return false; }; }); }; function css(el, prop) { return parseint($.css(el[0], prop)) || 0; }; function width(el) { return el[0].offsetwidth + css(el, 'marginleft') + css(el, 'marginright'); }; function height(el) { return el[0].offsetheight + css(el, 'margintop') + css(el, 'marginbottom'); }; })(jquery);