I'm not too good at javascript. and hope I can get a bit of help. I'm using Coda Slider 2.0, and have designed it to where the tabs are another slider to the right of the main slider, and each item. Basically like this mootools plugin http://landofcoder.com/demo/mootool/lofslidernews/index2.1.html

Problem is the items will not scroll. How do I make the items (or tabs to the right) scroll down as the slider rotates? Otherwise the slider will show the 4th slide but not scroll to the 4th item on the right, but Thanks everyone.

Here is the Coda-Slider plugin:

// when the DOM is ready...
$(document).ready(function () {

    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');

    // if false, we'll float all the panels left and fix the width 
    // of the container
    var horizontal = true;

    // float the panels left if we're going horizontal
    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');

    // apply our left + right buttons
    $scroll
        .before('<img class="scrollButtons left" src="images/scroll_left.png" />')
        .after('<img class="scrollButtons right" src="images/scroll_right.png" />');

    // handle nav selection
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
    }

    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;


    var scrollOptions = {
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',

        // allow the scroll effect to run both directions
        axis: 'xy',

        onAfter: trigger, // our final callback

        offset: offset,

        // duration of the sliding effect
        duration: 500,

        // easing - can be used with the easing plugin: 
        // http://gsgd.co.uk/sandbox/jquery/easing/
        easing: 'swing'
    };

    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);

    // now apply localScroll to hook any other arbitrary links to trigger 
    // the effect
    $.localScroll(scrollOptions);

    // finally, if the URL has a hash, move the slider in to position, 
    // setting the duration to 1 because I don't want it to scroll in the
    // very first page load.  We don't always need this, but it ensures
    // the positioning is absolutely spot on when the pages loads.
    scrollOptions.duration = 1;
    $.localScroll.hash(scrollOptions);


    ///////////////////////////////////////////////
// autoscroll
///////////////////////////////////////////////

// start to automatically cycle the tabs
   cycleTimer = setInterval(function () {
   $scroll.trigger('next');
}, 2000);  // how many milliseconds, change this to whatever you like

// select some trigger elements to stop the auto-cycle
var $stopTriggers = $('#slider .navigation').find('a')    // tab headers
    .add('.scroll')                     // panel itself
    .add('.stopscroll')             // links to the stop class div
    .add('.navigation')          // links to navigation id for tabs
    .add("a[href^='#']");      // links to a tab

// this is the function that will stop the auto-cycle
function stopCycle() {
   // remove the no longer needed stop triggers
   clearInterval(cycleTimer);          // stop the auto-cycle itself
   $buttons.show();                           // show the navigation buttons
   document.getElementById('stopscroll').style.display='none';    // hide the stop div
   document.getElementById('startscroll').style.display='block';  // block the start div
}

// bind stop cycle function to the click event using namespaces
$stopTriggers.bind('click.cycle', stopCycle);

///////////////////////////////////////////////
// end autoscroll
///////////////////////////////////////////////
//  edit to start again
///////////////////////////////////////////////
// select some trigger elements to stop the auto-cycle

var $startTriggers_start = $('#slider .navigation').find('a') // tab headers
    .add('.startscroll');               // links to the start class div

// this is the function that will stop the auto-cycle
function startCycle() {
   // remove the no longer needed stop triggers
   $buttons.hide();                    // show the navigation buttons
   $scroll.trigger('next');          // directly to the next first
   cycleTimer = setInterval(function () {         // now set timer again
   $scroll.trigger('next');
   }, 5000);  // how many milliseconds, change this to whatever you like
   document.getElementById('stopscroll').style.display='block';  // block the stop div
   document.getElementById('startscroll').style.display='none';  // hide the start div
}

// bind stop cycle function to the click event using namespaces
$startTriggers_start.bind('click.cycle', startCycle);

///////////////////////////////////////////////
// end  edit to start
///////////////////////////////////////////////



});