Here's the page I am attempting to implement it on.

www.yosoh.com/2010/advertising/beyond/

I have a custom script with figures out the width of all the images, adds it up, then sets the width of that page... I'd like to be able to set the arrows at the top to scroll to the next div (div.portfolioImage).

I've followed Ariel Fischer's demo and documentation as best I can... but something keeps escaping me. I've finally gotten some "movement" on page load.. but to tell you the truth, I can't figure out if it's my html structure, css styles, or implementation of serialScroll causing the issue.

here's the code for the buttons:

<ul id="portfolioNav">
<li><a href="" id="prev">&larr;</a></li>
<li><a href="" id="next">&rarr;</a></li>
</ul>

Here's the script, as it is right now:

$('#mainContent').css('overflow', 'hidden');
$('#mainContent').serialScroll({
  items:'.portfolioItem',
  prev:'a#prev',
  next:'a#next',
  axis: 'x',
  duration:1200,
  force:true,
  stop:true,
  lock:false,
  easing:'easeOutQuart',
  jump: true
 });