0

CakePHPアプリにjCarouselLiteスライダーがあり、最後に微調整が必​​要です。クライアントは、ユーザーが背後の背景画像を確認できるように、スライダーが約5秒間読み込まれないようにしたいと考えています。

これまでのところ、次のように設定しています。

<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 メソッド (コールバック) の 2 番目のパラメーターとして開始する必要があります。

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

コンテナが隠されているため、jCarousel は GUI を計算できません。

(スマホから書いているので誤字脱字すいません(;_;))

于 2012-12-17T23:16:02.643 に答える