title: jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling
body: <p>I am looking to implement horizontal scrolling using <a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html" rel="nofollow noreferrer">jQuery.SerialScroll</a> (based on <a href="http://demos.flesler.com/jquery/scrollTo/" rel="nofollow noreferrer">jQuery.ScrollTo</a>).</p>
  
  <p>I currently have a continuous horizontal scrolling working with liScroll as I discuss in <a href="https://stackoverflow.com/questions/41027/whats-a-good-bit-of-js-or-jquery-for-horizontally-scrolling-news-ticker">this post</a>.</p>
  
  <p>However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.</p>
  
  <p>For some reason, if the 'axis' property is specified as 'x' nothing happens.</p>
  
  <p>I can't even get the <a href="http://flesler-plugins.googlecode.com/files/SerialScroll_right-to-left.js" rel="nofollow noreferrer">SerialScroll example for right to left scrolling</a> to work.</p>
  
  <p>I have HTML like this:</p>
  
  <pre><code>&lt;div id="pane"&gt;
     &lt;div&gt;Item 1&lt;/div&gt;
     &lt;div&gt;Item 2&lt;/div&gt;
     &lt;div&gt;Item 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have jQuery like this, that works when axis is 'y'</p>
  
  <pre><code> 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);
     });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>//Edit (answer accepted)</p>
  
  <p>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:</p>
  
  <pre><code> var index = 2;
  
   setInterval(function() {//scroll each 5 seconds
   index = index &gt; $('#news ul li').length ? 1 : index;
    sliderScroll($('#news ul li:nth-child(' + index + ')'));
    index ++;
   }, 5000);
  </code></pre>
  
  <p>replacing #news ul li to your appropriate selector.</p>