質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.23%

jQueryのスライドショー（bxSlider）が動かなくなった

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 6,522
yoda

yoda

score 12

前提・実現したいこと

サイトでbxSliderライブラリを使用しているのですが、
jquery-1.11.0.min.jsを非同期処理させるサイトの改修を行たところ、動かなくなってしまいました。

自分が担当になる2年くらい前に外部へ制作を依頼したしたもので、修正が困難になっています。

発生している問題・エラーメッセージ

animation.js:40
Uncaught TypeError: $(...).bxSlider2 is not a function
    at HTMLDocument.<anonymous> (http://サイトのドメイン/表示するHTMLがあるパス/js/animation.js:40:62)
    at j (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:27136)
    at Object.fireWith [as resolveWith] (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:27949)
    at Function.ready (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:29783)
    at HTMLDocument.K (http://サイトのドメイン/pc/common/js/jquery-1.11.0.min.js:2:30128)

※bxSliderを二つ使用していて、bxSlider2はその一つです
animation.jsというのからbxSliderを呼んでいるのか？と思いますが

該当のソースコード

ヘッダー部分 

<head>
………
<!-- cmsが自動出力するエリア -->
<script src="/pc/common/js/jquery-1.11.0.min.js" type="text/javascript" defer></script>
<script src="/pc/common/js/libs.js" type="text/javascript" defer></script>

<!-- 任意で記述できるエリア -->
<script src="/pc/common/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="/pc/common/js/libs.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<link rel="stylesheet" type="text/css" href="css/jquery.bxslider2.css">
<link rel="stylesheet" type="text/css" media="all" href="css/animation.css" />

<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollorama.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<script type="text/javascript" src="js/jquery.bxslider2.js"></script>
<script type="text/javascript" src="js/motio.min.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
………
</head>

animation.jsの40行目付近 

$(function(){

    // --------------------
    // スクロール値を０に戻す。
    // --------------------
    // if( $(window).scrollTop() > 1500 ){
    //     window.location.href = "#";
    // };

    // ----------------------------------------
    // sub-bx-slider
    // ----------------------------------------
    var $bxSlider2 = window.$bxSlider2 = $('.sub-bx-slider').bxSlider2({
        pagerCustom: '.bx-pager',
        controls: true
    });

    // --------------------
    // main-bx-slider
    // --------------------
    var $bxSlider = $('.main-bx-slider').bxSlider({
        pagerCustom: '.bx-pager',
        auto: true,
        autoDelay: 500,
        // speed: 1500,
        pause: 5000,
        onSlideNext: function(){
            $bxSlider2.goToNextSlide();
            $bxSlider.startAuto(false);
        },
        onSlidePrev: function(){
            $bxSlider2.goToPrevSlide();
            $bxSlider.startAuto(false);
        },
        controls: true
    });

    $('.main-bx-slider').parent().parent().find('.bx-next').on('click',function(event) {
        $bxSlider2.goToNextSlide();
    });

    $('.main-bx-slider').parent().parent().find('.bx-prev').on('click',function(event) {
        $bxSlider2.goToPrevSlide();
    });

    // slideのprev/nextを非表示にする
    $(".bx-prev").eq(1).css("display", "none");
    $(".bx-next").eq(1).css("display", "none");

});

スライダー部分 

………
<div class="main-bx-slider">
<div class="slide">
……
</div>
<div class="slide">
……
</div>
</div>

<div class="sub-bx-slider">
<div class="slide">
……
</div>
<div class="slide">
……
</div>
</div>
………

試したこと

１）
上記のコードのように、deferをつけている箇所がCMSで勝手に出されるため
deferをつけないものを重複して記述しましたがダメでした。
２）
本番公開しているものは不具合が出ていないので、その記述をコピーペーストしてみましたがダメでした

ファイルの位置は動かしていないので、それ以外の要因ではと思っております。
どうぞよろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

checkベストアンサー

+1

jquery-1.11.0.min.jsを非同期処理

非同期で読み込むようにしたのであれば、動機的に呼び出している各種ライブラリより後に呼ばれる可能性が高く、その時点でjQueryが無い状態になり、bxSlider以外も動かないのではないかと思います。

deferをつけないものを重複して記述しましたがダメでした。

同一URLのファイルの扱いはブラウザによって変わる気がしますが、先に出た指定を優先するような気がします。（調べてません）

非同期の読み込み順を決められるライブラリなどを使うか、非同期をあきらめられるかどちらかではないでしょうか。

追記：

全ての script要素に defer をつければ動くかもしれません。

【scriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…】
http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/how-to-use-script-defer-and-async-for-performance-enhancement/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/20 20:29

    ginさん、kei344さん、少ない情報だったにも関わらず、素早いコメントと考察をありがとうございました！
    > 全ての script要素に defer をつければ動くかもしれません。
    こちらの処置で無事に動くようになりました。今後似たような状況になったらこのスレッドの事を思い出すようにいたします！

    キャンセル

link

0

.bxSlider2→.bxSliderではないですか？ 

var $bxSlider2 = window.$bxSlider2 = $('.sub-bx-slider').bxSlider({ ... });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/20 18:38

    勘ですが、jquery.bxslider2.js に bxSlider2 として定義しているのではないかと思います。

    キャンセル

  • 2016/11/20 19:31

    ですかね～
    $(...).bxSlider2がいないってエラーなのでbxslider.jsを2個作ったはいいけど中の関数までは変えてないのかなと踏んだんですがｗ
    さすがに変えてるか…

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る