jCarousel + jQuery Accordion + fadeIn

Question

Please check this link www.aboud-creative.com/demos/mckinley3. There I have a jQuery Accordion with jCarousel inside "Developments" section of it. I use standard fadeIn function for the logo, accordion and a stag on the bottom right to fade in on page load. So, When you go to "Developments" section, you will see there are no images shown. It's my problem. When I don't use fadeIn function so that all elements show at once on page load, it works fine, but once I make accordion display:none in the stylesheet and then show it using fadeIn, the issue appears. What can I do about this?

Answer 1

If the carousel is hidden during initialization, jCarousel has problems to do required calculations. The solution is to initialize jCarousel once the container is displayed.

Something like this:

$('container_selector').fadeIn(function() {
    var c = $('carousel_selector');
    if (!c.data('jcarousel')) {
        c.jcarousel({ ... options .. });
    }
});