// SET UP THE SLIDER

      $(function() {
        
		//vars
		var conveyor = $(".content-conveyor", $("#sliderContent")),
		item = $(".item", $("#sliderContent"));
		
		//set length of conveyor
		conveyor.css("width", item.length * parseInt(item.css("width")));
				
        //config
        var sliderOpts = {
		  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          slide: function(e, ui) { 
		
            conveyor.css("right", "+" + ui.value + "px");
		  }
		
        };

        //create slider
        $("#slider").slider(sliderOpts);
		
      });
	  
	  
	  
// EXTEND THE SLIDER TO ENABLE LEFT AND RIGHT CLICKS

	 $.extend($.ui.slider.prototype, {
			  
		right: function() {
			
			this.value(this.value() + this.options.step * 80);
		
			var conveyor = $(".content-conveyor", $("#sliderContent")),
			item = $(".item", $("#sliderContent"));
		
		
		    conveyor.css("right", this.value());
			
		},
	  
	  	left: function() {
	   		
			this.value(this.value() - this.options.step * 80);
		
			var conveyor = $(".content-conveyor", $("#sliderContent")),
			item = $(".item", $("#sliderContent"));
		
            conveyor.css("right", this.value());
		}
	
	  });


// ARROW TO MOVE SLIDER LEFT
	 $("#left").click(function() {
	 
	 
	 	$("#slider").slider("left");
	 
	 });
	
	
// MOVE SLIDER RIGHT
	 $("#right").click(function() {
		   $("#slider").slider("right");
	 });