Content slider. Could anyone advance this?

[newmaster]

Hi all!
I have found this script, very simple. I like this but i want more advanced
What I want is: How to make, that turned always in one side (right or left)? Instead of that has reached the end, thumbs through back and again forward... and also previous, play/pause, next button.
Can anyone help?
Thank u in advance!
here is HTML:

<div id="wrapper">
 <div id="slider">
  <div class="inslider">
    <!-- Content holder will hold content -->
    <div class="contentholder">
     <div class="contentslider">
 
      <div class="content">
        <h1>Welcome to Content Slider Demo</h1>
        <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
      </div>
      <div class="content">
        <h1>Welcome to Content Slider Demo 2</h1>
        <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
      </div>
      <div class="content">
         <h1>Welcome to Content Slider Demo 3</h1>
        <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
      </div>
      <div class="content">
        <h1>Welcome to Content Slider Demo 4</h1>
        <p>Lorem Ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
      </div>        
   </div>
   </div>
 
<!-- Navigation for content slider -->
      <div class="contentnav">
          <a rel="1" href="#">1</a>
          <a rel="2" href="#">2</a>
          <a rel="3" href="#">3</a>
          <a rel="4" href="#">4</a>
      </div>
    </div>
   </div>
 </div>
</div>

here is CSS

body {
	background-color:#f0f0f0;
}
#wrapper {
	width:960px;
	margin-left:auto;
	margin-right:auto;
	overflow:visible;
}
 
#slider {
	background-color:#3a3a3a;
	position:relative;
	padding:20px;
	overflow:hidden;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px;
        -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}
.content {
	width:920px;
	float: left;
	position: relative;
	background-color:#FFF;
}
.inslider a {
	text-decoration:none;
}
.contentholder {
	border: 1px solid #a9a9a9;
	height:300px;
	width: 920px;
	overflow: hidden;
	position: relative;
	background-color:#FFF;
}
.contentslider {
	position: absolute;
	top: 0; left: 0;
}
.contentnav {
	position: absolute;
	bottom: 30px; left:30px;
	 height:30px;
	z-index: 100;
	text-align: center;
	line-height: 30px;
	border: 1px solid #000;
	background-color: #fff;
	border: 1px solid #000;
}
.contentnav a {
	padding: 5px;
	text-decoration: none;
	color: #333;
}
.contentnav a.active {
	font-weight: bold;
	color:#FFF;
	background: #603;
}

Here is Jquery And Custom Js Linking:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="custom.js" type="text/javascript"></script>

here is custom.js

$(document).ready(function() {
//Activate First Link
$(".contentnav a:first").addClass("active");
//width of a single content area
var contentwidth = $(".contentholder").width();
//Total number of content
var totalcontent = $(".content").size();
//Total width of all content area
var allcontentwidth = contentwidth * totalcontent;
//contentslider to new size which we got in above step
$(".contentslider").css({'width' : allcontentwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr("rel") - 1;
//Set the distance which single content needs to slide
var slidedistance = slideid * contentwidth;
//Remove active class
$(".contentnav a").removeClass('active');
//Add Active Class
$active.addClass('active');
//Slider Animation
$(".contentslider").animate({
        left: -slidedistance
    }, 500 );
}; 
 
//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $('.contentnav a.active').next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $('.contentnav a:first');
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$(".contentnav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});