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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

532閲覧

bxSlider が初回訪問時しか動かない

zd2719

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/09/01 20:34

初めて相談します。宜しくお願いいたします。

TOPページに設置した bxSlider が、初回訪問時は動くのですが、
ページ遷移してTOPに戻ってくると動かないのです。

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

2回目以降、TOPページを訪問すると ページャーの ●●● しか表示されません。 写真の領域は真っ白で、動く気配がありません。

該当のソースコード

<script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, slideWidth: 972, auto: true, autoControls: true, integer: 1000, speed: 1500 }); }); </script> <div class="bxslider-wrap"> <ul class="bxslider"> <li><img src="top_img/slide01.jpg" alt="イメージ1"></li> <li><img src="top_img/slide02.jpg" alt="イメージ2" ></li> <li><img src="top_img/slide03.jpg" alt="イメージ3"></li> <li><img src="top_img/slide04.jpg" alt="イメージ4"></li> <li><img src="top_img/slide05.jpg" alt="イメージ5"></li> </ul> </div>

試したこと

$(document).ready(function(){

jQuery(document).ready(function($){
に変えてたりしてみましたが、効果はありませんでした。

補足情報(FW/ツールのバージョンなど)

jqueryはこう記載しています。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

お考え下さった皆様 ありがとうございます。

bxslider.js の min 付きのファイルを
最新の min じゃないファイルに差し替えたら動きました。

あたらしい方は「$(this).load();」を「$(this).trigger('load');」にしてあったみたいです。
(これはお友達に教えてもらいました)

前のお客さんで使っていたファイルをそのまま使っていたので、
jquery3以降でエラー出たみたいです。

やはり最新セットで揃えたほうがバグらないのですね。
次回から気を付けます。

投稿2018/09/03 17:00

zd2719

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

確実に動く保証はないのですが、以下の様にしてみたらどうでしょうか。
私も以前ハマったことがあるのですが、その時の原因はDOMの読み込みのタイミングによるものでした。
ready()は要素の完全な読み込みを待たないため、画像等が大きい場合には意図しない動作になることがあるからです。

load()では画像等の読み込みも完了してからとなるため、動作が安定することが多いです。
まずは実行タイミングを変えてみることで、解決せずとも一つの切り分けにはなるかと思います。

js

1$(window).on('load', function() { 2 $('.bxslider').bxSlider({ 3 auto: true, 4 slideWidth: 972, 5 auto: true, 6 autoControls: true, 7 integer: 1000, 8 speed: 1500 9}); 10}

投稿2018/09/03 12:09

mikan_s4n

総合スコア377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問