Hide jCarousel on page load

Question

I need to do something similar to this:

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

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

Answer 1

You can set the position of the container element as position:absolute and left:-999em (or some big enough number), so it still "displays" so that jcarousel can configure it, but it doesn't appear anywhere on the page.

Then, when you want to display it, just change it to position:static and it will return to where it should be for the page. Or, if you are going to revive it somehow, first call jQuery('#ImgCarouselCon').hide() , then position:static (ideally through the CSS class that does this), then do any animation or something don't want to show her yet.

Answer 2

Try the initCallback parameter:

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