0

bxSlider ギャラリーを使用してサイトを開発しています。デフォルト設定を使用すると、Chrome と Firefox の両方で正常に動作します。

HTML が標準です。

<div id="home_title_gallery">
<span class="bxslider_stepback" id="bxslider_PagesTitle_1_left"></span>
<span class="bxslider_stepforward" id="bxslider_PagesTitle_1_right"></span>
<div class="bxslider" id="bxslider_PagesTitle_1">
<div id="bxslider_PagesTitle_1_0">
<img src="/custom/public/images/.slider-01.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_0_2500"></div>
<div id="bxslider_PagesTitle_1_1">
<img src="/custom/public/images/.slider-02.980.435.0.1.c.png" alt="" title="/gluten-free-wheat-free-recipes" data-caption="" data-description="" id="bxslider_PagesTitle_1_1_2501"></div>
<div id="bxslider_PagesTitle_1_2">
<img src="/custom/public/images/.slider-03.980.435.0.1.c.png" alt="" title="" data-link="/nutrition-media" data-caption="" data-description="" id="bxslider_PagesTitle_1_2_2502"></div>
<div id="bxslider_PagesTitle_1_3">
<img src="/custom/public/images/.slider-04.980.435.0.1.c.png" alt="PureBred Gluten Free Bread Wheat Free Bread" title="PureBred Gluten Free Wheat Free Bread" data-caption="" data-description="" id="bxslider_PagesTitle_1_3_2503"></div>
<div id="bxslider_PagesTitle_1_4">
<img src="/custom/public/images/.slider-05.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_4_2504"></div>
<div id="bxslider_PagesTitle_1_5">
<img src="/custom/public/images/.slider-06.980.435.0.1.c.png" alt="" title="" data-caption="" data-description="" id="bxslider_PagesTitle_1_5_2505"></div>
</div>
</div>

(以前は、ネストされた div の代わりにulandでした。ただし、動作は同じでした。)li

bxSlider ギャラリーは次のように開始されます。

app.onload(function(){
    $('.bxslider').each(function() {
        var id = $(this).attr('id');
        var right_arrow = app.get(id + '_right');
        var left_arrow  = app.get(id + '_left');
        $(this).bxSlider({
            'pager': false,
            'auto': true,
            'nextSelector': right_arrow,
            'prevSelector': left_arrow,
            'nextText': 'Step forward',
            'prevText': 'Step back'
        });
    });
});

画像が読み込まれるまでギャラリーをスライドさせたくないのでapp.onload()、 ではなく自家製の を使用しています。$(document).ready()関数は次のとおりです。

var app = {
    get: function(id) {
        return document.getElementById(id);
    },
    onload: function(func) {
        // http://www.dustindiaz.com/top-ten-javascript/
        var oldonload = window.onload;
        if (typeof window.onload !== 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }
                func();
            };
        }
    },
    onunload: function(func) {
        // based on above
        var oldonunload = window.onunload;
        if (typeof window.onunload !== 'function') {
            window.onunload = func;
        } else {
            window.onunload = function() {
                if (oldonunload) {
                    oldonunload();
                }
                func();
            };
        }
    }
};

これは Firefox では問題なく動作しますが、Chrome ではランダムのようです。半分強の確率で、javascript はまったく実行されず、ページのずっと下まで一連の大きな画像が残り、まったくスライドしません。関連するエラー メッセージが Chrome デバッガーに表示されません。いくつかの場所に追加するconsole.log()と、関数まで到達することがわかります$(this).bxSlider()(console.log()いずれにせよ、そのすぐ上で起動します) が、何もしません。

ここで何が起こっているのかを理解するにはどうすればよいですか? また、どうすれば修正できますか?

これはカスタムの prev および next ボタンと関係があると思っていました。それらを取り出したときに機能しました：

        $(this).bxSlider({
            'pager': false,
            'auto': true,
        });

しかし今では、それは運が良かっただけだと思います (おかしなことを思い出してください)。今では、それらなしでは機能しません。まあ、時々そうです。そうでない場合が多い。

4

0 に答える 0