Question

I have played around and implemented JQuery cycle to create a carousel with images, but as yet, no HTML content. I know it works with HTML as per the demo at the bottom of the page

http://malsup.com/jquery/cycle/int2.html

but because it parses child DIVS separately as individual slides, the HTML content can’t include any DIVS. Is there a way of positioning content inside the DIV using something other than a DIV?

Answer 1

If you look at the options page, you’ll see an entry for slideExpr with the comment “expression for selecting slides (if something other than all children is required)”. So you can just give all the top-level slide containers a class (like slide for example) and then pass that in:

$('#slideshow').cycle({ slideExpr: '.slide' });

Though it looks like the default is “all children”, so sub-divs should not be a problem even under the default setup. The source code confirms this:

var $cont = $(this);
var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children();

If you pass in a slide expression, it uses that, otherwise it uses children(), which only navigates a single level down.