1

OK、やや気を失っています。私が顧客のために取り組んでいるサイトで、JCarousel の助けが必要です。何らかの理由で、私は上記の問題で何時間も立ち往生しています。何を試しても、まだ問題があります (ページが読み込まれるとカルーセルは正常に動作しますが、図を見てください!)

私はこれとこれとこれを他の提案の中で試しましたが、うまくいきません.エラーはまだ表示されます.

私のコードは次のようになります。

<div class="Block BlockContent">

    <link rel="stylesheet" type="text/css" href="/content/PromoBannerCarousel/pbjcarousel.css">
    <script type="text/javascript" src="/content/PromoBannerCarousel/jquery.jcarousel.min.js"></script>

    <div class="jcarousel-skin-promobanner">
        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                <ul id="promobannercarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; top: -500px; left: 0px; height: 90px; align: center;">
                    <li>
                        <a href="https://itoutlet.com.au/free-shipping-promotion-sep-2013/">
                           <img src="/content/PromoBannerCarousel/images/augfreedeliveryselprodmini.jpg" title="Free shipping on selected products throughout our store, available from Sep 11 to Sep 30 or while stocks last"/>
                        </a>
                    </li>

                    <li>
                        <a href="https://itoutlet.com.au/acer-promotions/">
                           <img src="/content/PromoBannerCarousel/images/acercashbackmini.jpg" title="Acer fantastic Laptop & All In One + Shipping cash back offers! Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/hp-promotions/">
                           <img src="/content/PromoBannerCarousel/images/hpaugoffersmini.jpg" title="HP fantastic Laptop + Shipping offers! Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/wd-promotions/">
                           <img src="/content/PromoBannerCarousel/images/wdpetrolpromotmini.jpg" title="WD Personal Cloud + Petrol Voucher + Shipping Promotion"/>
                        </a>
                    </li>  
                    <li>
                        <a href="https://itoutlet.com.au/lenovo-promotions/">
                           <img src="/content/PromoBannerCarousel/images/lenovoaugoffersmini.jpg" title="Great ThinkPad + Shipping offers from Lenovo. Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/samsung-tablets/">
                            <img src="/content/PromoBannerCarousel/images/galaxyfreeshipmini.jpg" title="Thin, light, stylish, Samsung Galaxy + Shipping offers. Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="/content/PromoBannerCarousel/images/5shippingmini.jpg" title="$5 shipping anywhere in Australia on selected accessories. Look out for the $5 Shipping tag!"/>
                        </a>
                    </li>

                </ul>
            </div>
            <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
            <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
        </div>

    </div>    

</div>
<script type="text/javascript">   
jQuery(document).ready(function() {
    jQuery('#promobannercarousel').jcarousel({
        auto: 4,
        scroll: 1,
        wrap: 'circular',
        animation: 500,
        iniFallbackDimension: 90,
        itemLoadCallback: {
            onBeforeAnimation: mycarousel_fadeOut,
            onAfterAnimation: mycarousel_fadeIn
        }
    });
    function mycarousel_fadeOut(carousel) {
        var JCcontainerID = carousel.clip.context.id;
        $('#' + JCcontainerID).fadeOut();
    }

    function mycarousel_fadeIn(carousel) {
        var JCcontainerID = carousel.clip.context.id;
        $('#' + JCcontainerID).fadeIn();
    }
});
</script>

CSS はここにあります。

問題を示すページへのリンクを次に示します。カルーセルは、ページ上部のプロモーション バナーです。Chrome (最新リリース) を使用すると問題が発生します。

どんな助けでも大歓迎です！

PS: FireFox (最新リリース) ではエラーが表示されないため、なぜ Chrome ではエラーになるのに FF ではエラーになるのかわかりません...

PSS: また、ページが最初の画像をロードしたときに、安定する前に数回ちらつくこともわかります。JCarouselでこれが起こったことは一度もありません。これを解決するためにいくつかの方法を試しました...これについて何か提案があれば、私もとても感謝しています!!

助けてくれてありがとう！M

4

0 に答える 0