jquery slideshow navigation problem

Hi

I am making a slideshow with two navigation icons (top and bottom). I have used a code several times but never in this way.

$('#list-links li a, #list-tab li a').hover(function(){
        $('#list-links li, #list-tab li').removeClass('hover');
        var i = $(this).index('#list-links li a, #list-tab li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });

Basically this adds and removes a class (hover) to the list so that I can style accordingly. The problem is that it won´t work this way. Can somebody help out?

Oh, the original full code is this:

$(document).ready(function() {

    // Declare variables
    var width = 718; // width of slide - required for animation calculation
    var slides = $('#list-images li');
    var numSlides = slides.length;

    // Wrap the slides & set the wrap width - this will be used to animate the slider left/right
    slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
    $('#slide-wrap').css({width: width * numSlides});

    // Hover function - animate the slides based on index of active link
    $('#list-links li a').hover(function(){
        $('#list-links li').removeClass('hover');
        var i = $(this).index('#list-links li a');
        $(this).parent().addClass('hover');
        $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
    });

});