I used the following script which I took from this site:

http://www.scribd.com/doc/19581128/H...der-10-Minutes

Which I adapted to the following:

Linked to hosted copy of jQuery:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

CSS code:

#container {
float:left;
width:450px;
font-family:'Crimson Text',Serif;
}
#carousel {
padding-top:20px;
height:250px;
width:500px;
overflow:hidden;
}
#carousel ul {
list-style-type:none;
margin-top:4px;
width:4000px;
margin-left:0;
left:0;
padding-left:1px;
}
#carousel li {
display:inline;
}
#carousel ul li img{
width:240px;
height:240px;
padding-right:10px;
float:left;
}
#navNext {
float:left;
}
#navPrev {float:right;}

Then placed the items I want to "scroll" as li elements:

<div id="container">
<div id="carousel" style="position:relative; left:-50px;">
<ul>
<li><img src="../resources/layout/process_1.png" /></li>
<li>
<div style="width:230px; height:230px; padding-left:10px; padding-right:10px; display:inline; float:left;"><h2>1. Meeting</h2>
<p style="color:#413B3B">Our first meeting will review your ideas, sketches, or inspiration for your design, we’ll also discuss stone requirements and metals.</p>
<p style="color:#413B3B">From our discussions, I will make a set of design sketches that we can review together.</p></div>
</li>
<li><img src="../resources/layout/process_1.png" /></li>
<li><div style="width:230px; height:230px; padding-left:10px; padding-right:10px; display:inline; float:left;"><h2>2. Design</h2>
<p style="color:#413B3B">Once we have decided on the design I make a more detailed technical design drawing that provides a realistic image of what the finished piece will look like.</p>
<p style="color:#413B3B">At any stage of the process the designs can be modified to ensure that they are exactly what you want.</p></div></li>
<li><img src="../resources/layout/process_1.png" /></li>
<li><div style="width:230px; height:230px; padding-left:10px; padding-right:10px; display:inline; float:left;"><h2>3. Meeting</h2>
<p style="color:#413B3B">Our first meeting will review your ideas, sketches, or inspiration for your design, we’ll also discuss stone requirements and metals.</p>
<p style="color:#413B3B">From our discussions, I will make a set of design sketches that we can review together.</p></div></li>
<li><img src="../resources/layout/process_1.png" /></li>
<li><img src="../resources/layout/process_1.png" /></li>
</ul>
</div>
<a id="navPrev" href="#" style="position:relative; left:-45px;"><img src="../resources/layout/cb_i04_right_arrow.png" width="21" height="13" /></a>
<a id="navNext" href="#" style="position:relative; left:-45px;"><img src="../resources/layout/cb_i04_left_arrow.png" width="21" height="13" /></a>
</div>

Placed javascript in head (it seemed to work both here and in the body)

<script type="text/javascript"> $(document).ready(function(){
//Define the animation speed for the Carousel
var speed = 600;$('#navPrev').click(function(){
//As the rest of our carousel is hidden, lets move it's margin left untilit's in view
//We use the jQuery animate() function give this movement a nice smooth feel
$('#carousel ul').animate({marginLeft:'-500px'}, speed);});$('#navNext').click(function(){
//And now lets move back to the start of the Carousel
$('#carousel ul').animate({marginLeft:'1px'}, speed);});});
</script>

BUT it only show the first 4 items and then the next arrow (navNext) does not allow me to scroll further right as expected.

You can see a test page here:

http://www.generator.uk.com/cattbudd.../overview.html

I am sure I've done a stupid mistake as I am not a coder but a designer out of his depth!

:-)