Resolved Multiple instances of Plugin

[gilgimech]

I wrote this plugin for a simple slider.

(function($) {
    $.fn.ssCarousel = function(options) {
		 var defaults = {  
			speed        : 500,
		  	itemWidth    : '220px',
		  	itemAdjust   : 20,
			easingType   : 'easeInCirc',
			leftButton   : '',
			rightButton   : '',
		};  
		options = $.extend({},defaults, options);

		var element = $(this);
		
		console.log(element);
		
		return this.each(function() {
			$('li', element).clone().insertAfter('li:last', element);
			$('li:first', element).before($('li:last', element));
			jQuery.easing.def = options.easingType;
			
			$('img', options.leftButton).click(function(){
				var item_width = $('li', element).outerWidth() + options.itemAdjust;
				var left_indent = parseInt($(element).css('left')) - item_width;
				$(element).animate({'left' : left_indent},options.speed,function(){
					$('li:last', element).after($('li:first', element));
					$(element).css({'left' : '-'+options.itemWidth});
				}); 
			});
			$('img', options.rightButton).click(function(){
				var item_width = $('li', element).outerWidth() + options.itemAdjust;
				var left_indent = parseInt($('.ss-carousel').css('left')) + item_width;
				$(element).animate({'left' : left_indent},options.speed,function(){            
				$('li:first', element).before($('li:last', element)); 
				$(element).css({'left' : '-'+options.itemWidth});
				});
			});
		});
    };
})(jQuery);

<div id="carousel">

    <div id="carousel-left-btn" class="carousel-btn ssc-left-btn">
        <img src="images/left.png" />
    </div>
    
    <div id="carousel-container">
        
        <ul id="carousel-ul-1" class="ss-carousel">
        
            <li><a href="#"><img src="images/DP-650S-01.jpg" /></a></li>
            <li><a href="#"><img src="images/DP-650S-02.jpg" /></a></li>
            <li><a href="#"><img src="images/DP-650S-03.jpg" /></a></li>
            <li><a href="#"><img src="images/DP-650S-04.jpg" /></a></li>
            <li><a href="#"><img src="images/DP-650S-05.jpg" /></a></li>
            
        </ul>
        
    </div>
    
    <div id=carousel-right-btn" class="carousel-btn ssc-right-btn">
        <img src="images/right.png" />
    </div>

</div>


<script type="text/javascript">
	$('#carousel-ul').ssCarousel({
			leftButton   : '#carousel-left-btn',
			rightButton   : '#carousel-right-btn',
		});
</script>

this works fine, but what I want to do is eliminate the leftButton and rightButton options, but I can't figure out how to get it to work for multiple instances of the the plugin.

If I have two instances and I click one of the buttons. It controls both sliders.

How can I get it to work for each individual slider

[gilgimech]

OK I got this figured out.

Here's the code

(function($){

	$.fn.ssCarousel = function(options){
		var defaults = {
			easingType: 'easeInCirc',
			speed: 500,
			leftPosition: '-300px',
			itemAdjust: 20
		};
	
		var options = $.extend(defaults, options);
		
		return this.each(function() {
			var element = $(this);
				
			$('li', element).clone().insertAfter('li:last', element);
			$('li:first', element).before($('li:last', element));
			jQuery.easing.def = options.easingType;   
				
			$(element).parent().prev().children('img').click(function(){
				var item_width = $('li', element).outerWidth() + options.itemAdjust;
				var left_indent = parseInt($(element).css('left')) - item_width;
				$(element.not(':animated')).animate({'left' : left_indent},options.speed,function(){
					$('li:last', element).after($('li:first', element)); 
					$(element).css({'left' : options.leftPosition});
				}); 
			});
			
			$(element).parent().next().children('img').click(function(){
				var item_width = $('li', element).outerWidth() + options.itemAdjust;
				var left_indent = parseInt($(element).css('left')) + item_width;
				$(element.not(':animated')).animate({'left' : left_indent},options.speed,function(){           
				$('li:first', element).before($('li:last', element)); 
				$(element).css({'left' : options.leftPosition});
				});
			});
			
		});
	};
})(jQuery);