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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

1390閲覧

サーバーにUPをしたらスライダーの自動再生のみ動かない。

kinp

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

1クリップ

投稿2019/09/17 09:24

前提・実現したいこと

jQuery・Javascriptについてです。
複数のjQuery・Javascriptを外部ファイルの読み込みで作成しました。
しかし、ローカルでは通常通りに動いているが
サーバーUPすると、動かなくなります。
サーバーUP時も自動再生するようにしたいです。
※外部ファイルとして、既存のファイルも読み込んでいます。(lightbox.css/jquery.bxslider.css/jquery.bxslider.js/lightbox.js)

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

ローカルでは通常通りに動いているが
サーバーUP時にスライダーの自動再生だけが動かなくなる。
手動でスライダーを動かすことはできます。
他jQuery・Javascriptは動きます。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ああああ</title> <meta name="description" content="あああああ"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <!--bxslider--> <link rel="stylesheet" href="css/jquery.bxslider.css"> <!--lightbox--> <link rel="stylesheet" href="css/lightbox.css"> <!--stylesheet--> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="container"> <h1>ああああ</h1> </div><!--container--> </header> <main class="main container"> <div class="bxslider"> <div><img src="img/s1.png" alt=""></div> <div><img src="img/s2.png" alt=""></div> <div><img src="img/s3.png" alt=""></div> <div><img src="img/s4.png" alt=""></div> </div><!--bxslider--> <div class="modal"> <a class="example-image-link" href="img/1.png" data-lightbox="example-set" data-title=""><img class="example-image" src="img/1.png" alt=""></a> <a class="example-image-link" href="img/2.png" data-lightbox="example-set" data-title=""><img class="example-image" src="img/2.png" alt=""></a> <a class="example-image-link" href="img/3.png" data-lightbox="example-set" data-title=""><img class="example-image" src="img/3.png" alt=""></a> <a class="example-image-link" href="img/4.png" data-lightbox="example-set" data-title=""><img class="example-image" src="img/4.png" alt=""></a> </div><!--modal--> <div class="container accordion"> <dl> <dt class="open">今日の日付</dt> <dd id="now">ここに日付が入る</dd> <dt>運勢</dt> <dd id="result">ここに結果を表示</dd> <dt>地図</dt> <dd class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25925.979462989693!2d139.67921177465823!3d35.68322047920156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f2fbf4665f2b%3A0x4938558752d098e2!2z5pa55Y2X55S66aeF!5e0!3m2!1sja!2sjp!4v1568711073927!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe></dd> </dl> </div> </main> <!--頁TOPへ戻る--> <p id="page-top"><a href=".container"> <i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a></p> <footer> <p><small> Copyright &copy; あああ All rights reserved. </small></p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!--bxslider--> <script src="js/jquery.bxslider.js"></script> <!--lightbox--> <script src="js/lightbox.js"></script> <!--script--> <script src="js/script.js"></script> </body> </html>
@charset "utf-8"; /*resetcss*/ html,body,h1,ul,li,p,h2,dl,dt,dd{ margin:0; padding:0; line-height:1.0; font-family:'Century Gothic',Meiryo,sans-serif; } ul,li{ list-style:none; } img{ vertical-align:bottom; border:none; max-width:100%; } /*ここから全体*/ body{ background-color:#fffbfb; } .container{ max-width:960px; margin:0 auto; } /*header*/ .header{ border-bottom:4px solid #ff0000; background:#000; color:#fff; padding:10px 0; margin-bottom:4%; } .header h1{ line-height:100px; text-align:center; font-size:300%; } /*bxslider*/ /*lightbox*/ .modal{ display:flex; justify-content:space-between; align-content:center; flex-wrap:wrap; width:96%; margin:100px auto; } .modal>a{ width:24%; margin-bottom:8px; } /*accordion*/ .accordion{ margin:50px auto; } dt{ background:#FF0000; padding:6px; line-height:40px; border-bottom:1px solid #fff; text-align: center; color:#fff; font-size:18px; font-weight:bold; } dd{ height:160px; padding:20px; border:1px solid #fc8383; border-top:0; box-sizing:border-box; } dt.open{ background:rgb(21, 13, 13); } /*日付*/ #now{ text-align:center; font-size:150%; line-height:110px; } /*おみくじ*/ #result{ text-align: center; font-weight:bold; line-height:110px; font-size:50px; } #result.good{ color:rgba(170, 201, 0, 0.87); font-size:110px; } /*map*/ .map{ position:relative; padding-bottom:40%; height:0; overflow: hidden; margin-bottom:50px; } .map iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; padding:30px; box-sizing:border-box; } /*btn*/ #page-top{ position:fixed; bottom:20px; right:20px; } #page-top a{ display:block; font-size:60px; color:#747373; } #page-top a:hover{ color:#9f3a3a; } footer{ padding:30px; color:#fff; border-top:4px solid #ff0000; background:#000; text-align:center; }
$(function(){ //bxslider $('.bxslider').bxSlider({ mode:'horizontal', auto:true, pause:5000, speed:2000 }); //accordion $('dd:not(:first)').hide(); $('dt').on('mouseover',function(){ if($(this).next().css('display')=='none') { $('dt').removeClass('open'); $('dd').slideUp(); $(this).addClass('open'); $(this).next().slideDown(); } }); //btn-top var topBtn = $('#page-top'); $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); }else { topBtn.fadeOut(); } }); topBtn.on('click', function () { $('body,html').animate({ scrollTop:0 },500); return false; }); //日付 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth(); var date = today.getDate(); var day = today.getDay(); var week = ['日','月','火','水','木','金','土']; var hour = today.getHours(); var minutes = today.getMinutes(); var second = today.getSeconds(); var element = document.getElementById('now'); var str = '現在は、'+year+'年'+month+'月'+date+'日、'+week[day]+'曜日、'+hour+'時'+minutes+'分'+second+'秒です。'; element.textContent = str; //おみくじ var fortune = ['大吉','吉', '中吉', '小吉', '末吉', '凶', '大凶']; var rnd = Math.floor(Math.random()*fortune.length); var element2 = document.getElementById('result'); var str2 = fortune[rnd]; if (rnd === 0) { element2.classList.add('good'); }else{ element2.classList.remove('good'); } element2.textContent = str2; });

試したこと

スライダーに頭をつけて、
jQuery(document).ready(function($){
$('.bxslider').bxSlider({
mode:'horizontal',
auto:true,
pause:5000,
speed:2000
});
});
に変更しましたが、変わりありませんでした。

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

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

開発者ツールのConsoleに何かエラーが出ているか確認してみてください。
もしかするとどこかのロジックでエラーが出ているのかもしれません。

エラーが出ていないのであればちょっとわからないので、Google先生に聞いてみましょう。
以下記事とかが投稿者様に近い状況の解決策を記載しているので、確認してみると良いかもです。

https://gaolalife.blogspot.com/2018/04/bxslider.html
https://fukafuka295.jp/bxslider_error/

投稿2019/09/18 01:46

vnsa7221

総合スコア348

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

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

kinp

2019/09/18 06:08

コンソールも確認したのですが、何もエラーがでず。。。 Consoll.logと書かないとエラーはでないですか??
vnsa7221

2019/09/18 06:23 編集

エラーを検出するだけであれば特にconsole.logを記述しなくても大丈夫です。 例えばですが、下記のようにconsole.logを一文追加して再読み込みして開発者ツールのConsoleを開き、 追加した文言が表示されればとりあえずjqueryは動いていると判断することができます。表示されない場合はjqueryの読み込みが上手くいってない等の判断ができ、原因を突き止めやすくなります。 ``` jQuery(document).ready(function($){ console.log("動いているか確認"); // これを追加 $('.bxslider').bxSlider({ mode:'horizontal', auto:true, pause:5000, speed:2000 }); }); ```
kinp

2019/09/19 06:20

vnsa7221さんがお話されている通り、おかしいところはなかったみたいです。 原因は不明なのですが、2日後に急に動き出しました。 ありがとうございます! コンソールもいれたのですが、やはりでず。。。 謎はわからないですが、もしかしたらPC側かchrome側の問題だったのかもしれないです。 ありがとうございました! 丁寧なご対応ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問