jQuery fadeIn jCarouselLite div causes slider not to advance

Question

I have a working jCarouselLite slider in a CakePHP app that needs one last tweak. The client would like for the slider to not load for about five seconds so that the user can see the background image behind it.

So far I have it set up like this:

<script type="text/javascript">
        $(document).ready(function() {
            $('#carouselDelay').delay(5000).fadeIn(400);
        });
    </script>

<?php echo $this->Html->script(array('jquery.easing.1.3','jcarousellite_1.0.1','jquery.mousewheel.min'), array('inline' => false, 'safe' => false)); ?>
<script type="text/javascript">
    $(document).ready(function() {
        $('#carousel').jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            circular: true,
            auto: 5000,
            beforeStart: function(a) {
              jQuery(a).parent().fadeTo(300, 0);
            },
            afterEnd: function(a) {
              jQuery(a).parent().fadeTo(300, 1);
            },
            speed: 0,
            visible: 1,
            btnGo: [".carouselThumb .1", ".carouselThumb .2",
                ".carouselThumb .3", ".carouselThumb .4", ".carouselThumb .5", ".carouselThumb .6", ".carouselThumb .7", ".carouselThumb .8", ".carouselThumb .9"]
        });
    });

</script>

<div id="carouselDisplay">
    <div id="carousel">
         <!-- Carousel content here -->
    </div>
</div>

The problem is that when I have the fade effect enabled on #carouselDisplay, the slider itself does not advance to the next slide.

I have tried calling jQuery noConflict, but that didn't help. I also tried moving the delay and fade affect to a $(window).load event, but the result was the same.

Can you help me figure out why the delay is conflicting with the slider advancement? I haven't found any other reports of this.

Thanks!

Answer 1

You should initiate the carousel as the second parameter of the fadeIn method (the callback):

$('#carouselDelay').delay(5000).fadeIn(400, function() {
    $('#carousel').jCarouselLite({
        [...]
        [...]
    });
});

Because the container is hidden, jCarousel will not be able to calculate the GUI.

(Writing this from a smart phone, sorry for any typos :))