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

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.