jQuery Cycle plugin not generating pager links.

Question

This one has been perplexing me on a couple recent sites I've worked on, and I had to end up going with another solution, but I'm determined to get to the bottom of it this time.

Here is the example code from the demo page here: http://jquery.malsup.com/cycle/int2.html

$('#s4') 
.before('<div id="nav">') 
.cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});

And here is my fairly similar snippet:

$(document).ready(function() {
    $("#banners").before('<div id="banner-nav" class="nav"/>').cycle({
        fx: 'fade',
        speed: 1000,
        pager: '.nav'
    });
});

The nav div is generated correctly as a normal jQuery call, but there is nothing in it, empty. It's not a CSS issue, because there is no markup generated at all, I've changed to different versions of jQuery 1.3.x - 1.4.x, I've changed the container element to something else besides a div, ul etc, and I've removed it from the document.ready call, and still no luck.

Answer 1

Even when the example says so the code they are using in their web is:

$('#s4').before('<div id="nav" class="nav">').cycle({
    fx:     'turnDown',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav'
});

And I think the problem is probably using a class instead of an id in the pager parameter, try with #banner-nav in your code and see if that works or not.

Answer 2

Problem solved, so stupid, make sure you're using jquery.cycle.ALL and not any of the other lighter versions as they don't have support for the paging feature. Reading comprehension fail on my part.