0

我在需要最后一次调整的 CakePHP 应用程序中有一个工作的 jCarouselLite 滑块。客户端希望滑块在大约五秒钟内不加载，以便用户可以看到它后面的背景图像。

到目前为止，我的设置如下：

<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>

问题是当我启用淡入淡出效果时#carouselDisplay，滑块本身不会前进到下一张幻灯片。

我曾尝试调用 jQuery noConflict，但这并没有帮助。我还尝试将延迟和淡入淡出影响移动到 $(window).load 事件，但结果是一样的。

你能帮我弄清楚为什么延迟与滑块推进冲突吗？我还没有找到任何其他关于此的报道。

谢谢！

4

1 回答 1

2

您应该将轮播作为 fadeIn 方法（回调）的第二个参数启动：

$('#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 :))

于 2012-12-17T23:16:02.643 回答