Using multiple pagers in jQuery cycle plugin

Question

Is it possible to have multiple pager elements for a slideshow using the cycle plugin for jQuery? For example, in this project, I need to have a pager above and below the slideshow. The code below works fine, but when I try to "clone" the nav (prev, next, and pager) using jQuery's clone() function, the pager will not work (although both sets of prev and next links work).

var $pager = $('<span class="pager"></span>').prependTo("div.vg-nav"),
 $prev = $('<a href="" class="p">Previous</a>').prependTo("div.vg-nav"),
 $next = $('<a href="" class="n">Next</a>').prependTo("div.vg-nav");
$prev.add($next).wrapAll('<span class="nav"></span>');
$("div.vg-nav").clone().insertAfter("div.vg-items");

$("div.vg-items").cycle({
 prev:  $prev,
 next:  $next,
 pager:  $pager
});

The code above is a stripped down version, to keep the post short and to the point! :)

Answer 1

Mike Alsup put out a new version (2.73) to support multiple pagers for a slideshow. In my example however, it would not work properly, possibly because the prev/next/pager items were being appended to the markup and stored/referenced as JS variables. Once I changed the code to reference prev/next/pager class names (shown below), instead of the JS variables, it worked!

$("div.vg-items").cycle({
 prev:  "a.p",
 next:  "a.n",
 pager:  "span.pager"
});

Answer 2

hey Jeremy, could you please explain how to archive that?