$(document).ready(function() {
 
    // Declare variables
    var direction = 'vertical'; // Additional variable which determines the slider direction - vertical or horizontal
    var width = 400;
    var height = 292; // Declare the height of the slider panel
    var slides = $('#list-images li');
    var numSlides = slides.length;
 
    // Set CSS of slide-wrap based on direction
    wrapCss = direction == 'vertical' ? {height: height * numSlides} : {width: width * numSlides} ;
 
    // Wrap the slides & set the wrap width
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css(wrapCss);
 
  // Hover function - animate the slides based on index of links
  $('#list-links li a').hover(function(){
    $('#list-links li').removeClass('hover');
    var i = $(this).index('#list-links li a');
    $(this).parent().addClass('hover');
 
    // Set animation based on direction
    params = direction == 'vertical' ? {'marginTop' : height*(-i)} : {'marginLeft' : width*(-i)} ;
    $('#slide-wrap').stop().animate(params);
  });
});