Hide a jCarousel when page loads

Question

I need to do something similar to this:

jQuery('#ImgCarousel').jcarousel({});
jQuery('#ImgCarouselCon').hide();

ImgCarouselCon is the container div that is wrapped around the carousel. With this code the carousel is still being loaded when it is hidden and I get errors. I looked at jCarousels documentation but I can't find a callback that would work. Something like onComplete would be ideal but no dice.

Answer 1

You could set the position of the container element to be position:absolute and left:-999em (or some sufficiently large number), so it's still "displayed" for jcarousel to be able to set it up, but it's not anywhere visible on the page.

Then when you want to display it, just change it to position:static and it will jump back into where it should be for the page. Or if you're going to animate it somehow, call jQuery('#ImgCarouselCon').hide() first, then position:static (ideally through a CSS class that does that), then do whatever animation or whatnot you want to do to show it.

Answer 2

Try the initCallback option:

jQuery('#ImgCarousel').jcarousel({
    initCallback: function() {jQuery('#ImgCarouselCon').hide();}
});