Move my slider thumbnails as new slide comes into view

Question

Script: jQuery Cycle slider: http://jquery.malsup.com/cycle/

I'm using the following code to move my slider thumbnails container to the left by "130px" just before the next slide comes into view. The margin is then reset to "0px" when the last slide is reached. This works well, however the container does not shift until the third slide.

This is the code I'm using:

function onBefore(currElement, nextElement, opts, isFoward) {
    var currentslide = opts.currSlide + 1; 
    if(currentslide == opts.slideCount) {
        jQuery(".slider-nav").animate({marginLeft: '0'});
    } else if(currentslide > 1 && currentslide != opts.slideCount) {
        jQuery(".slider-nav").animate({marginLeft: '-=133'});
    }           
}

How can I have it shift once the second slide comes into view. Note: Replacing "> 1" in the code above with "> 0" shifts the container as soon as the page loads.

Answer 1

I'm not sure of the context in which this function is called. But I think you want the following code:

function onBefore(currElement, nextElement, opts, isFoward) {
      if(opts.currSlide == opts.slideCount) {
         jQuery(".slider-nav").animate({marginLeft: '0'});
     } else { 
         jQuery(".slider-nav").animate({marginLeft: '-=133'});
     }
}

If that doesn't work it may be because your first slide is (slideCount = 0) instead of (slideCount = 1). If so change the IF test to:

      if(opts.currSlide == (opts.slideCount - 1)) {

Regards Neil