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)});
    });

});
  • Patrick
    • Support Monkey

    Hi @wally9

    I'm not much of a coder, but can you not simply add...
    $('#list-tab li a').hover(function(){...
    ...after the existing
    $('#list-links li a').hover(function(){...
    It looks like the issue is the doubling-up of elements you're declaring in the function...
    $('#list-links li a, #list-tab li a').hover(function(){...

    But, like I said, I'm not of a coder. Perhaps someone more knowledgeable could chime in here. :slight_smile:

  • wally9
    • WPMU DEV Initiate

    If I do that they work, yes, but they will work independently.

    Meaning that the hover class is added only to the list I´m using and the second one doesn´t get the hover class.

    I want to get the hover class on both of my navigation elements. So that I can then style them to show what is currently being viewed.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.