jquery slideshow navigation problem


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');
$('#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');
$('#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.