Having a hard time implementing jquery serialScroll to a website. Need help!

Question

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
 });

Answer 1

Try taking out the line easing:'easeOutQuart', - it's a bit of a stupid thing to put in, if you check the top of the demo page source you can see it's a custom function taken from the easing plugin so if that function isn't found, the whole thing will break.

Answer 2

If that doesn't work try seeing http://stackoverflow.com/questions/211111/jquery-scrollto-jquery-serialscroll-horizontal-scrolling