Pete Robinson.co.uk - PHP Web Developer Essex and London

						<div id="slider_wrapper">
							<a href="#" id="prev">Previous Button</a>
							<a href="#" id="next">Next Button</a>
							<div id="slider_container">
								<div id="slider">
									<p>First Element</p>
									<p>Second Element</p>
									<p>Third Element</p>
									<p>Fourth Element</p>
									<p>Fifth Element</p>
								</div><!-- slider -->
							</div><!-- slider_container -->
						</div><!-- slider_wrapper -->
					

						#slider_wrapper {
							width:700px;
							margin:0;
							padding:0 0 0 20px;
							display:block;		/* Important */
							position:relative;	/* Important */
							overflow:hidden;	/* Important */
						}

						#slider_container {
							height:50px;		/* Important (although height doesn'''t have to be 50px, but it does need a height) */
							margin:0;
							padding:0;
							position:relative;	/* Important */
						}

						#slider {
							margin:0;
							padding:0;
							left:0px;
							position:relative;	/* Important */
							float:left;			/* Important */
							width:3225px;		/* Important */
						}

						#slider p {
							float:left;			/* Important */
							width:645px;		/* Important */
							text-align:center;
							margin:0;
							padding:0;
						}

						#prev {
							top:0;
							left:0;
							position:absolute;	/* Important */
							z-index:100;		/* Important */
						}

						#next {
							top:0;
							right:0;
							position:absolute;	/* Important */
							z-index:100;		/* Important */
						}
					

						(function($){
							$.fn.carousel = function(options) {
								// default variables
								var defaults = {
									incrementor: 645,
									next_button: '#button_next',
									prev_button: '#button_prev',
									speed: 300
								};
								
								// combine predefined variables and user-passed variables
								var options = $.extend(defaults, options);
								
								return this.each(function() {
									// click handler for the next button
									$(options.next_button).click(function() {
										// assign the parent DIV to _element variable for ease of use
										var _element = $(this).next('div').find('div:first');
										// check to see if the element is currently animated. if it is, do nothing. this is to prevent width issues
										if($(_element + ':animated').size() == 0) {
											// get _elements left value
											var arr = _element.css('left').split('px');
											// deduce incremntor value from the left property
											var new_left = arr[0] - options.incrementor;
											// remove the 'px' from the end of the elemnts width value and store result to variable
											var arr = _element.css('width').split('px');
											// set width variable to first key of the array generated from the split
											var width = arr[0];
											// if the new left position will be less than or equal to the max width (inverted to minus)
											if(new_left <= ((width<0) ? width * -1 : width * -1)) {
												// get the elements width
												var arr = _element.css('width').split('px');
												var nwidth = arr[0];
												// set a new width
												_element.css('width', parseInt(nwidth) + parseInt(nwidth) + 'px');
												// append content
												_element.append(_element.html());
											};
											// animate
											_element.animate({left: new_left + 'px'}, {queue: false, duration: options.speed});
										};
										return false;
									});
									// click handler for prev button
									$(options.prev_button).click(function() {
										// assign the parent DIV to _element variable for ease of use
										var _element = $(this).parent().find('div').eq(1);
										// check to see if the element is currently animated. if it is, do nothing. this is to prevent width issues
										if($(_element + ':animated').size() == 0) {
											// get the width
											var arr = _element.css('left').split('px');
											// calculate new width
											var new_left = parseInt(arr[0]) + parseInt(options.incrementor);
											var arr = _element.css('width').split('px');
											var width = arr[0];
											// if the new left postiion is less than zero
											if(new_left <= 0) {
												// animate
												_element.animate({left: new_left + 'px'}, {queue: false, duration:options.speed});
											};
										};
										return false;
									});
								});
							};
						})(jQuery);