(function($) { $.fn.Carousel = function(o) { o = $.extend({ btnNext: null, auto: null, speed: 200, easing: null, circular: true, visible: 3, vertical: true, start: 0, scroll: 1 }, o || {}); return this.each(function() { var running = false, animCss = o.vertical ? "top" : "left", sizeCss = o.vertical ? "height" : "width"; var div = $(this), ul = div.children("ul"), tLi = ul.children("li"), tl = tLi.size(), v = o.visible; if(o.circular) { ul.prepend(tLi.slice(tl-v).clone()) .append(tLi.slice(0,v).clone()); o.start += v; } var li = ul.children("li"), itemLength = li.size(), curr = o.start; var liSize = o.vertical ? height(li) : width(li); 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({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"}); var ulSize = liSize * itemLength; var divSize = liSize * v; li.css({sizeCss: liSize}); ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); div.css(sizeCss, divSize+"px"); if(o.btnNext) $(o.btnNext).click(function() { return go(curr+o.scroll); }); if(o.auto) setInterval(function() { go(curr+o.scroll); }, o.auto+o.speed); function go(to) { if(!running) { if(o.circular) { if(to <= o.start-v-1) { ul.css(animCss, -((itemLength-(v*2))*liSize)+"px"); curr = to == o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll; } else if(to >= itemLength-v+1) { ul.css(animCss, -( (v) * liSize ) + "px" ); curr = to == itemLength-v+1 ? v+1 : v+o.scroll; } else curr = to; } else { if(to < 0 || to > itemLength-v) return; else curr = to; } running = true; ul.animate( {opacity: 0}, o.speed/2, o.easing, function() { $(this).css(animCss, -(curr*liSize)+'px'); $(this).animate({opacity: 1}, o.speed/2, o.easing); running = false; } ); } 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);