Help with Round-a-bout Jquery image slideshow

Hi fellow WF!

I'm designing a website for a client.

I have the roundabout (jquery) script on it to display the clients building work.

Here is the problem. 5 images on the carousel seem to work but when I add another line of code for more the whole thing spreads out on the page!


<div id="folio_scroller_container" class="grid_8 cleafix" style="left: 0px; top: 0px; height: 2153px">
<ul id="folio_scroller" style="height: 2147px">

<li><span>Homepage</span><a href="#"><img alt="" src="images/project1-1.jpg" height="335" width="500" /></a></li>
<li><span>Content Page</span><a href="#"><img alt="" src="images/P1/5.jpg" height="335" width="500" /></a></li>
<li><span>Dropdown Menu</span><a href="#"><img alt="" src="images/P1/4.jpg" height="335" width="500" /></a></li>
<li><span>Comments List</span><a href="#"><img alt="" src="images/P1/3.jpg" height="335" width="500" /></a></li>
<li><span>Comment Form</span><a href="#"><img alt="" src="images/P1/2.jpg" height="335" width="500" /></a></li>

[so I've added the one below]

<li><span>Comment Form</span><a href="#"><img alt="" src="images/P1/2.jpg" height="335" width="500" /></a></li>


Is there something else i need to do to tell it i have added another image?