/* btnPrev Selector for the "Previous" button. The navigation buttons - both prev and next - need not be as part of the carousel "div" itself, but it can be if you want it to. Where ever you decide to place those buttons in the HTML structure, an appropriate jQuery selector for the "previous" button should be provided as the value for this option. btnNext Selector for the "Next" button. The navigation buttons - both prev and next - need not be as part of the carousel "div" itself, but it can be if you want it to. Where ever you decide to place those buttons in the HTML structure, an appropriate jQuery selector for the "next" button should be provided as the value for this option. btnGo If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on the item number within the carousel, you can use this option. Just supply an array of selectors for each element in the carousel. The index of the array represents the index of the element. What i mean is, if the first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin. The best part is that, the tab will "slide" based on the provided effect. :-) mouseWheel As of version 0.4.0, the navigation buttons are no more needed to enjoy the carousel. The mouse-wheel itself can be used for navigation. To achieve this, 2 things should be done. First, include the mousewheel plugin (checkout the installation section). Second, set "true" for this option. That's it, now you will be able to navigate your carousel using the mouse wheel. Using buttons and mouse-wheel are not mutually exclusive. You can still have buttons for navigation as well. They complement each other. To use both together, just supply the btnNext/btnPrev or btnGo options. auto As of version 0.4.0, the carousel can auto-scroll as well. This is enabled by specifying a millisecond value to this option. The value you specify is the amount of time between 2 consecutive slides. The default is null, and that disables auto-scrolling. Specify this value and watch your carousel magically scroll. speed Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect. easing You can specify any easing effect. Note: You need easing plugin for that. Once specified, the carousel will slide based on the provided easing effect. vertical Determines the direction of the carousel. true, means 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 items will slide the items from left-right in this case. circular 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. visible This specifies the number of items visible at all times within the carousel. The default is 3. You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the last item half visible. This gives you the effect of showing the user that there are more images to the right. start You can specify from which item the carousel should start. Remember, the first item in the carousel has a start of 0, and so on. scroll As of version 0.4.0, you can specify the number of items to scroll when you click the next or prev buttons. Ofcourse, this applies to the mouse-wheel and auto-scroll as well. For example, scroll:2 will scroll 2 items at a time. beforeStart Callback function that should be invoked before the animation starts. The elements representing the items that are visible before the animation is passed in as argument. afterEnd Callback function that should be invoked after the animation ends. The elements representing the items that are visible after the animation ends are passed in as argument. http://www.gmarwaha.com/jquery/jcarousellite/ */ (function($){$.fn.jCarouselLite=function(o){ o=$.extend({ btnPrev:null, btnNext:null, btnGo:null, mouseWheel:false, auto:null, speed:300, easing:null, vertical:false, circular:false, visible:1, start:0, scroll:1, beforeStart:null, afterEnd:null }, o||{}); return this.each(function(){ var b=false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width"; var c=$(this), ul=$("ul",c), 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 f=$("li",ul), itemLength=f.size(), curr=o.start; c.css("visibility","visible"); f.css({ /*overflow:"hidden",*/ float:o.vertical?"none":"left" }); ul.css({ margin:"0", padding:"0", position:"relative", "list-style-type":"none", "z-index":"11" }); c.css({ overflow:"hidden", position:"relative", "z-index":"12", left:"0px"}); var g=o.vertical?height(f):width(f); var h=g*itemLength; var j=g*v;f.css({ width:f.width(),height:f.height() }); ul.css(sizeCss,h+"px").css(animCss,-(curr*g)); c.css(sizeCss,j+"px"); 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,a){$(a).click(function(){ return go(o.circular?o.visible+i:i)})}); if(o.mouseWheel&&c.mousewheel)c.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 f.slice(curr).slice(0,v)}; function go(a){if(!b){if(o.beforeStart)o.beforeStart.call(this,vis()); if(o.circular){if(a<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*g)+"px"); curr=a==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll } else if (a>=itemLength-v+1){ul.css(animCss,-((v)*g)+"px"); curr=a==itemLength-v+1?v+1:v+o.scroll } else curr=a} else { if(a<0||a>itemLength-v)return; else curr=a}b=true; ul.fadeOut("fast"); ul.animate(animCss=="left"?{left:-(curr*g)}:{top:-(curr*g)}, o.speed,o.easing, function(){ ul.fadeIn("fast"); if(o.afterEnd)o.afterEnd.call(this,vis()); b=false }); 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(a,b){return parseInt($.css(a[0],b))||0}; function width(a){return a[0].offsetWidth+css(a,'marginLeft')+css(a,'marginRight')}; function height(a){return a[0].offsetHeight+css(a,'marginTop')+css(a,'marginBottom')}})(jQuery);