Jason Gordon

.slider-carousel {
  position:relative;
  height:400px;
}
.slider-carousel .controls{
  position:relative;
  top:55px;
}
.slider-carousel .controls .summary,
.slider-carousel .active-control .tab{
  display:none;
}
.slider-carousel .active-control .summary{
  display:block;
}
 
.slider-carousel .images{
  position:absolute;
  top:55px;
  right:0;
  width:600px;
  height:340px;
  overflow:hidden;
}

<div class="slider-carousel">
  <div class="controls">
    <div id="control-0" class="control active-control">
      <div class="tab"><a href="javascript:void(0)"><span>Promo 2</span></a></div>
 
      <div class="summary">
        <h3 class="title">Promo 2</h3>
          <div class="hero-footer"></div>
      </div>
    </div>
    <div id="control-1" class="control">
      <div class="tab"><a href="javascript:void(0)"><span>Promo 5</span></a></div>
 
      <div class="summary">
        <h3 class="title">Promo 5</h3>
          <div class="hero-footer"></div>
      </div>
    </div>
    <div id="control-2" class="control">
      <div class="tab"><a href="javascript:void(0)"><span>Promo 1</span></a></div>
 
      <div class="summary">
        <h3 class="title">Promo 1</h3>
          <div class="hero-footer"></div>
      </div>
    </div>
  </div>
 
  <div class="images">
    <div id="image-0" class="image active-image">
      <img src="http://localhost:8100/sites/default/files/imagecache/600x340/hero_promo/3d-landscapes-terragen01.jpg" 
alt="" title="" width="600" height="340" />
    </div>
    <div id="image-1" class="image">
      <img src="http://localhost:8100/sites/default/files/imagecache/600x340/hero_promo/68landscapes04-m241.jpg" 
alt="" title="" width="600" height="340" />
    </div>
    <div id="image-2" class="image">
      <img src="http://localhost:8100/sites/default/files/imagecache/600x340/hero_promo/2PacGreatestHits.jpg" 
alt="" title="" width="600" height="340" />
    </div>
  </div>
</div>

$(document).ready(function(){
  carousel = new ScrollerCarousel('.slider-carousel', 12000);
});

/**
 * Name: SliderCarousel
 * Author: Jason Gordon
 * Description: Implements a dynamic carousel where the slides scroll instead of
 *              fade in and fade out.
 */
ScrollerCarousel = function(container, rotationInterval) {
 
  var self = this; // We need selc because the scope/value of 'this' can change.
  //this.rotationInterval = rotationInterval;
  this.rotationInterval = 3000;
  this.container = $(container);
  this.interval = null;
 
 
  this.rotate = function(target){
    var activeId = this.getActiveId();
 
    // If no target is defined, rotate to the next slide.
    if( target == undefined ){
      target = activeId + 1;
 
      if( target >= this.container.find('.image').length ) {
        target = 0;
      }
    }
 
    this.updateControls(target);
 
    // Scroll the image to the target spot
    var scrollTop = target * this.container.find('.images').height();
    this.container.find('.images').animate({'scrollTop': scrollTop}, 'normal');
  }
 
  this.attachControls = function(){
    this.container.find('.control .tab a').click(function(){
      id = $(this).parent().parent().attr('id').replace('control-', '');
      self.rotate(id);
    }).hover(function(){
      self.pause();
    }, function(){
      self.resume();
    });
 
    this.container.find('.control .summary').hover(function(){
      self.pause();
    }, function(){
      self.resume();
    });
  }
 
  this.updateControls = function(target){
    var activeControl = this.container.find('.active-control');
    var targetControl = this.container.find('#control-' + target);
 
    // Slide up active control summary and slide down active control tab
    activeControl.find('.summary').slideUp('slow');
 
    // Slide down the active tab so it is now revealed
    activeControl.find('.tab').slideDown('slow');
 
    // Slide up target control tab and slide down the target control summary
    targetControl.find('.tab').slideUp('slow');
    targetControl.find('.summary').slideDown('slow', function(){
     activeControl.removeClass('active-control');
      targetControl.addClass('active-control');
    });
  }
 
  this.pause = function (){
    window.clearInterval(this.interval);
  }
 
  this.resume = function (){
    this.interval = window.setInterval('carousel.rotate()', this.rotationInterval);
  }
 
  this.getActiveId = function(){
    if( this.container.find('.active-control').attr('id') == undefined ){
      return 0;
    }
 
    return parseInt(this.container.find('.active-control').attr('id').replace('control-', ''));
  }
 
  this.attachControls();
  this.resume();
}