Need advices for slider logic implementation
===

I am trying to create jQuery slider for learning client side programming.

I want to create circular slider.

I have two buttons: prev (not implemented yet) and next.

Next button logic works fine until last img is visible, you can see it here:

http://jsfiddle.net/jUjb7/1/

I am pasting JS code here to for better readability:

    (function($) {
    
    	$.fn.mySlider = function(options) {
    
    		// Create some defaults, extending them with any options that were provided
    		var settings = $.extend({
    			imgMarLft : 10,
    			imgMarRgt : 10,
    			visAmount : 4,
    			imgH : 222,
    			imgW : 144,
    			prev : '.prev',
    			next : '.next',
    		}, options);
    
    		var imgOuterW = settings.imgW + settings.imgMarLft + settings.imgMarRgt, currActiveIdx = settings.visAmount - 1;
    
    		return this.each(function() {
    
    			var container = $(this), imgs = container.find('img').hide();
    
    			container.parent().css({
    				width : settings.visAmount * imgOuterW,
    				overflow : 'hidden',
    			});
    
    			container.css({
    				width : imgs.length * imgOuterW,
    				float : 'left',
    				position : 'relative',
    				height : settings.imgH,
    			});
    
    			imgs.each(function(idx) {
    				var curr = $(this);
    				curr.css({
    					float : 'left',
    					marginLeft : settings.imgMarLft,
    					marginRight : settings.imgMarRgt,
    					position : 'absolute',
    					left : idx * imgOuterW,
    					display : 'block',
    				});
    				curr.attr({
    					height : settings.imgH,
    					width : settings.imgW
    				});
    			});
    
    			imgs.show();
    
    			$(settings.prev).click(function() {
    				console.log('prev');
    			});
    
    			$(settings.next).click(function() {
    				currActiveIdx++;
    
    				if (currActiveIdx > imgs.length - 1) {
    					currActiveIdx = settings.visAmount - 1;
    				}
    				container.find('img').each(function(idx) {
    					var curr = $(this), currLft = curr.position().left;
    
    					if (idx == imgs.length - 1) {
    						curr.parent().prepend(curr);
    
    					}
    
    					if (currLft <= imgs.length * imgOuterW) {
    						curr.css('left', currLft - imgOuterW);
    					}
    
    				});
    				console.log(currActiveIdx);
    
    			});
    
    		});
    	};
    })(jQuery);


Could someone give me any advice?