Adding to a jquery slider

[andrew_biggart]

I am using this jquery slider. (http://css-tricks.com/examples/StartStopSlider/ )

 

I was wondering how I would go about adding left and right arrows to control the slides and possibly pagination. Is this possible with the following code? Can anyone point me in the right directions, because my Javascript is limited.

 

Javascript

 

// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 5000;

function doMove(panelWidth, tooFar) {
var leftValue = $("#inner-slider-mover").css("left");

// Fix for IE
if (leftValue == "auto") { leftValue = 0; };

var movement = parseFloat(leftValue, 10) - panelWidth;

if (movement == tooFar) {
	$(".slide img").animate({
		"top": -270
	}, function() {
		$("#inner-slider-mover").animate({
			"left": 0
		}, function() {
			$(".slide img").animate({
				"top": 0
			});
		});
	});
}
else {
	$(".slide img").animate({
		"top": -270
	}, function() {
		$("#inner-slider-mover").animate({
			"left": movement
		}, function() {
			$(".slide img").animate({
				"top": 0
			});
		});
	});
}
}

$(function(){

    var $slide1 = $("#slide-1");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;

var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);
var totalMoverwidth = numPanels * panelWidth;
$("#inner-slider-mover").css("width", totalMoverwidth);

sliderIntervalID = setInterval(function(){
	doMove(panelWidth, tooFar);
}, delayLength);

});

 

 

Html

        <div id="outer-slider">
        	<div id="inner-slider-left">
            	<a href="#" class="left-arrow">Left</a>
            </div><!-- / inner-slider-left -->
        	<div id="inner-slider-mid">
            	<div id="inner-slider-mover">
                    <div id="slide-1" class="slide">
                    	<div class="inner-slider-info">
                			<h1>The boys are back in town.</h1>
						<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
                        </div><!-- / inner-slider-info -->
					<a href="#"><img src="images/slide-1.jpg" alt="The boys are back in town." /></a>
                    </div><!-- / slide-1 -->
                    <div class="slide">
                    	<div class="inner-slider-info">
                			<h1>Test 2.</h1>
						<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
                        </div><!-- / inner-slider-info -->
					<a href="#"><img src="images/slide-2.jpg" alt="The boys are back in town." /></a>
                	</div><!-- / slide-2 -->
                    <div class="slide">
                    	<div class="inner-slider-info">
                			<h1>Test 3.</h1>
						<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
                        </div><!-- / inner-slider-info -->
					<a href="#"><img src="images/slide-2.jpg" alt="The boys are back in town." /></a>
                	</div><!-- / slide-2 -->
                </div><!-- / inner-slider-mover -->
            </div><!-- / inner-slider-mid -->
            <div id="inner-slider-right">
            	<a href="#" class="right-arrow">Right</a>
            </div><!-- / inner-slider-right -->
        </div><!-- / outer-slider -->

 

 

CSS

.left-arrow, .right-arrow { width:34px; height:34px; position:relative; display:block; text-indent:-9999px; border:0; }
.left-arrow { background:url(images/left-arrow-bg.jpg) 0 0 no-repeat; }
.right-arrow { background:url(images/right-arrow-bg.jpg) 0 0 no-repeat; }
#inner-slider-mover { width: 2502px; position: relative; }
.inner-slider-info { width:240px; height:210px; position:relative; float:left; background-color:#29aae3; padding:30px; }
.inner-slider-info p { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#fff; margin:0 0 15px 0; padding:0; }
.slide { width:834px; height:270px; float: left; position: relative; }
.slide img { position: absolute; top: 0; left: 300px; }

 

 

[andrew_biggart]

Bump!