horizontal scrollto

HTML

<script src="demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
    <div class="nav">
        <ul>
            <li class="current"><a href="javascript:void(0);" class="one">Scroll to #1</a></li>
            <li><a href="javascript:void(0);" class="two">Scroll to #2</a></li>
            <li><a href="javascript:void(0);" class="three">Scroll to #3</a></li>    
            <li><a href="javascript:void(0);" class="four">Scroll to #4</a></li> 
            <li><a href="javascript:void(0);" class="five">Scroll to #5</a></li>
<li><a href="javascript:void(0);" class="six">Scroll to #6</a></li>        </ul>
<p class="position">0</p>
<p class="status"></p>
    </div>
    <div class="nav-second">
        <a href="#" class="nav-prev">prev</a>
        <a href="#" class="nav-next">next</a>
    </div>
<div id="slider">
    <ul>
        <li id="one" class="slideItem">
            <h1>Header #1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
         <li id="two" class="slideItem">
            <h1>Header #2</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dictum, ante a lacinia pharetra, ligula augue vestibulum urna, gravida placerat odio ipsum eget augue.</p>
        </li>
          <li id="three" class="slideItem">
            <a class="open" href="#">Open</a>
            <div class="panel">
                <div class="panel1">
                    <h1>Header #3</h1>
                    <p>Lorem ipsum dolor sit...

CSS

body {  }
  .nav {
    width: 138px;
    float: left;
    height:100%;
    background: #BBB;
  }
  
  .nav ul { list-style: none; }
  .nav ul li { padding-bottom: 10px; }
  .nav ul li.current { background: yellow; }
    
  .nav-second { position: absolute; top: 10px; right: 0; background: #c9ac68; padding: 15px 10px; }
  
   #slider {
    display: block;
    
    overflow-x: scroll;
    height: 300px;
    }

    /* collapsing panel inside section three */
    .panel2 { display: none; }
    a.open { float: right; }

    #slider ul {
        width: 1600px; 
    }

    #slider ul li {
        display: inline-block;
        width: 600px;
        float: left;
        padding-top: 100px;
    }
    
    /* sections (future wp pages) */
    #slider ul li#one{
        width: 300px;
        background: #BEBEBE;
    }
    #slider ul li#two{
        width: 200px;
        background: #FAFAFA;
    }
    #slider ul li#three {
        width: 150px;
        background: #CCCCCC;
    }
    #slider ul li#four{
        width: 300px;
        background: #BCBCBC;
    }
    #slider ul li#five{
        width: 200px;
        background: #F8F8F8;
    }
    #slider ul li#six{
        width: 300px;
        background: #CBCBCB;
    }

JavaScript

var $panels = $('#slider > ul > li'); //all sections
var panelLeftsArray = $panels.map(function() {
    return ($(this).position().left - 138); // make array of the lefts of content
}).get();

var len = panelLeftsArray.length; //number of sections
var getCurrentSectionIndex = function(left) { // take the current top position, and see which
    for (var i = 0; i < len; i++) { // index should be displayed
        if (left > panelLeftsArray[i] && panelLeftsArray[i + 1] && left < panelLeftsArray[i + 1]) {
            return i;
        }
    }
};

var setCurrentNav = function(position) {
    currentNavIndex = getCurrentSectionIndex(position);
    console.log(currentNavIndex);
    //var panel=".one";
    switch (currentNavIndex) {
    case 0:
        panel = ".one";
        break;
    case 1:
        panel = ".two";
        break;
    case 2:
        panel = ".three";
        break;
    case 3:
        panel = ".four";
        break;
    case 4:
        panel = ".five";
        break;
    case 5:
        panel = ".six";
        break;
    default:
        panel = ".one";
    }
    //console.log($('.nav li.current a').attr('class'));
    $('.nav li.current a').parent().removeClass('current').parent().find(panel).parent().addClass('current');
    console.log($('.nav li.current a').attr('class'));
};


$('.nav a').click(function() {
    // there's a better way of doing this?
    $('.nav li').removeClass('current');
    $(this).parent().addClass('current');

    var position = Math.abs($('#slider ul').offset().left - 138);
    $('p.status').html('index:' + getCurrentSectionIndex(position));

    //disable the scroll event so it doesn't broke the flow
    $('#slider').unbind('scroll', handler);

    //scrolls to the selected section
    $('#slider').scrollTo($('#' + $(this).attr('class')), 800, {
        axis: 'x'
    });

    //enable again the scroll event
    //$('#slider').bind('scroll',handler);
    var timeout = setTimeout(function() {
       ...