> I would like to create a slideshow with a vertical list of the slide
> navigation. I would like to smoothly animate a marker up and down to
> indicate the current slide. Here's what I have so far:
>
> $('#s1').cycle({
> pager: '#nav',
> before: onBefore
> });
>
> function onBefore() {
> var pos = $(".activeSlide").next().offset().top;
> //get position of
> the element *after* .activeSlide
> $("#marker").animate({top: pos}); //move marker to
> this position
> }
>
> This works fine for auto-playing. But once I click to navigate to
> different slide it slides to the wrong slides (not a big surprise
> since this function runs *before* the new .activeSlide class has been
> assigned)
onBefore is passed several arguments like this:
function onBefore(currEl,nextEl,opts,fwd) {
...
}
currEl is the DOM element for the currently displayed slide
nextEl is the DOM element for the 'about to be displayed' slide
opts is Cycle's internal options object that stores the options you
passed in along with current state. You can use the 'currSlide' and
'nextSlide' properties to determine the indexes of the curr and next
elements.
fwd is a flag. true if cycling forward, false for backwards.
Mike
