Question

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.

Answer 1

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>