jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

Hi,

I am looking to implement horizontal scrolling using jQuery.SerialScroll (based on jQuery.ScrollTo).

I currently have a continuous horizontal scrolling working with liScroll as I discuss in this post.

However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.

For some reason, if the 'axis' property is specified as 'x' nothing happens.

I can't even get the SerialScroll example for right to left scrolling to work.

I have HTML like this:

<div id="pane">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
</div>

I have jQuery like this, that works when axis is 'y'

 jQuery(function($) {
      var $pane = $('#pane');
      $pane.serialScroll({
          items: 'div',
          next: $pane, // the container itself will get bound
          duration: 2100,
          force: true,
          axis: 'x',
          step: 1, //scroll 1 news each time
          event: 'showNext' //just a random event name
       });

       setInterval(function() {//scroll each 12 seconds
          $pane.trigger('showNext');
       }, 12000);
   });

Any ideas?

//Edit (answer accepted)

For those that come along, the accepted answer gets rid of the need for "serialScroll" (just need scrollTo). Heights weren't required. Be sure to change $('scroller') to something like $('mywrap') or $(target.parent().parent()). You can also set up automatic scrolling like this:

 var index = 2;

 setInterval(function() {//scroll each 5 seconds
 index = index > $('#news ul li').length ? 1 : index;
  sliderScroll($('#news ul li:nth-child(' + index + ')'));
  index ++;
 }, 5000);

replacing #news ul li to your appropriate selector.

From stackoverflow Graphain

• I was recently working with scrollTo to implement a Coda-like slider wizard.

  Here's the steps I took:

  1. Set a containing div to the dimensions I wanted the slider to appear as. overflow:auto; helps for testing, but you'll probably want to use overflow:hidden in the end.
  2. Inside that place another div, make it big enough to hold all your elements horizontally.
  3. Float the panels. give them explicit dimensions.

  My CSS:

  .scroller{
    position: relative;
    overflow: hidden;
    height: 410px;
    width: 787px;}
    .modal-content{width: 3400px;}
      .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;}
  

  My JS:

  function sliderScroll(target){
    if(target.length <1)return false;
    $(".current").removeClass("current");
    target.addClass("current");
    $(".scroller").scrollTo(target,500,{axis:'x'});
    return false;
  }
  

  My HTML:

  <div class="scroller">
    <div class="modal-content">
       <div>...</div>
       ...
    </div>
  </div>
  

  Graphain : Great! - For those interested please see my edits in the question for some minor modifications.
  From Jethro Larson