0

Web サイトに jQuery Unslider を実装しようとすると、奇妙な問題が発生します。ローカルではすべてが魅力的に機能しますが、ホスト (この場合は One.com) にアップロードすると、すべてがバラバラになります。スライドショーの画像が上下に表示されます。

私は長い間コードの問題を探してきましたが、今では目が内側に向いています。だから、できれば助けてください=）

テスト サイトへのリンク: http://villabalder.se/VBv2/index.html

スクリプト:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>

jQuery:

    $(function() {
    $('.vbslides').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
        });
    });

HTML:

<div class="vbslides">
<ul>
    <li><img src="img/villabalder_ext1.jpg"></li>
    <li><img src="img/villabalder_ext2.jpg"></li>
    <li><img src="img/villabalder_int1.jpg"></li>
    <li><img src="img/villabalder_int2.jpg"></li>
</ul>
</div>

CSS:

    .vbslides { 
    position: relative; 
    overflow: no; 
}

.vbslides ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.vbslides ul li {  
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

    .vbslides .dot {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.vbslides .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

    .vbslides .dots li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 4px;

        text-indent: -999em;

        border: 2px solid #fff;
        border-radius: 6px;

        cursor: pointer;
        opacity: .4;

        -webkit-transition: background .5s, opacity .5s;
        -moz-transition: background .5s, opacity .5s;
        transition: background .5s, opacity .5s;
    }

        .vbslides .dots li.active {
            background: #fff;
            opacity: 1;
        }
4

2 に答える 2

0

したがって、 head 要素で次のように呼び出しています。

<!-- Övriga jQuery filer -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-sv.js"></script>

そして、体の最後で、これらを呼び出しています：

<!-- Hämtar Google CDN jQuery, med lokal back-up -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>

<!-- jQuery -->
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-sv.js"></script>

これは $ 変数を上書きしており、unslider プラグインは定義されていません。

明確にするために: ロードするコア jQuery ライブラリは 1 つだけにする必要があり、(通常) ページにロードする最初のスクリプト ファイルにする必要があります。

于 2013-08-21T23:16:13.047 に答える