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

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

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

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

Q&A

解決済

2回答

5999閲覧

jQueryのSlider Proを設定したいのですが、設定できません。

WPJ

総合スコア23

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

jQuery

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

0グッド

0クリップ

投稿2017/04/18 10:31

編集2017/04/19 11:37

jQueryのSlider Pro

以下のサイトを参考にし、
http://gimmicklog.main.jp/jquery/340/
jQueryのSlider Proを設定したいのですが、設定できません。
中盤にあるサムネイル付き縦スライダーを実現したいです。
jquery.sliderPro.min.js
slider-pro.css
上記をjs,cssのフォルダ内に入れました。

現状はイメージを設定している、
img/header-bg.jpgが4つ縦に連続で表記されている状態です。

実現したいのは、以下のURLにある、
http://gimmicklog.main.jp/demo/slider-pro/slider-pro.html
サムネイル付き縦スライドになります。

以下がHTMLですが、何が間違いでしょうか。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <meta name="description" content=""> <meta name="author" content=""> <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/modernizr.custom.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slider-pro.css" media="screen" /> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" /> <!--[if lt IE 9]> <script src="/js/respond.min.js"></script> <script src="/js/html5shiv.js"></script> <![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.slider-pro.min.js"></script> </head> <body> <script> $(function(){ $('#thumb-v').sliderPro({ width: 600,//横幅 orientation: 'vertical',//スライドの方向 arrows: true,//左右の矢印 buttons: false,//ナビゲーションボタン loop: false,//ループ thumbnailsPosition: 'right',//サムネイルの位置 thumbnailPointer: true,//アクティブなサムネイルにマークを付ける thumbnailWidth: 200,//サムネイルの横幅 thumbnailHeight: 80,//サムネイルの縦幅 breakpoints: { 600: {//表示方法を変えるサイズ thumbnailsPosition: 'bottom', thumbnailWidth: 200, thumbnailHeight: 80 }, 480: {//表示方法を変えるサイズ thumbnailsPosition: 'bottom', thumbnailWidth: 110, thumbnailHeight: 60 } } }); }); </script> <!-- Header --> <header class="text-center" name="home"> <div class="container topthirty"> <div class="row"> <div id="thumb-v" class="slider-pro"> <div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="img/header-bg.jpg" /> </div> <div class="sp-slide"> <img class="sp-image" src="img/header-bg2.jpg" /> </div> <div class="sp-slide"> <img class="sp-image" src="img/header-bg.jpg" /> </div> <div class="sp-slide"> <img class="sp-image" src="img/header-bg2.jpg" /> </div> <!--/ sp-slides--> </div> <div class="sp-thumbnails"> <img class="sp-thumbnail" src="img/header-bg.jpg"/> <img class="sp-thumbnail" src="img/header-bg2.jpg"/> <img class="sp-thumbnail" src="img/header-bg.jpg"/> <img class="sp-thumbnail" src="img/header-bg2.jpg"/> </div> <!--/ thumb-v--> </div> </div> </div> </header> </body> </html>

開発者ツールのエラー画像になります。
イメージ説明

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

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

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

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

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

kei344

2017/04/18 11:13

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「設定できない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
WPJ

2017/04/18 13:06

失礼しました。指示通り記載しましたが、不備等あれば至急追記しますので、よろしくお願い致します。
yuki84web

2017/04/18 14:24

"設定できません"をもう少し具体的にお願いします。ブラウザの開発者ツールのコンソールも確認してください
WPJ

2017/04/19 11:37

ご質問ありがとうございます。ブラウザの開発者ツールを確認しましたが、いくつかエラーがありました。画像を再度添付させて頂きます。
guest

回答2

0

js/jquery.slider-pro.min.js など js/ css/ で始まっているURLを httpから始まるパスに置き換えてください。

また、jQueryを2回呼ぼうとしています。どちらか一方で問題ありません。

HTML

1<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 2<!-- 中略 --> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

投稿2017/04/19 12:41

編集2017/04/19 14:44
kei344

総合スコア69364

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

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

fcrow

2017/04/19 14:23

コンソールログを見る限りローカル環境で確認しているようなので httpから始まるパスに置き換えてしまうと、かえって混乱を招く結果になってしまいそうです。 また jquery.min.js は読み込みに失敗(net::ERR_EMPTY_RESPONSE)しているので 現状では jquery-3.2.1.min.js が機能しているようです。 読み込みに成功していたら・・・後勝ちになるんでしょうか?
kei344

2017/04/19 14:43

To: fcrowさん 指摘ありがとうございます! > かえって混乱を招く結果になってしまいそうです。 そうかもしれませんね。file://でもいいんですが、とにかくパスを意識してもらうしかないかな、と思うのでここはそのままにしておきます。 > jquery-3.2.1.min.js が機能しているようです。 ちゃんと確認していませんでした。質問文の邪推を修正しておきます。 > 読み込みに成功していたら・・・後勝ちになるんでしょうか? 2個目以降で実行する場合はそうなります。1個目と2個目の間で実行しているものは1個目のjQueryに紐付くことになります。 たしか、jQuery読込時に「$」に内容があれば保存されるはずなので詳しくは jQuery.noConflict を調べてみてください。 【jQuery.noConflict() | jQuery API Documentation】 https://api.jquery.com/jquery.noconflict/
fcrow

2017/04/19 15:25

To: kei344さん なるほど!Demoこねくり回して理解しました! 疑問に答えていただきありがとうございます!
guest

0

ベストアンサー

jquery.sliderPro.min.js をjsフォルダに入れたんでしょうか?
HTMLでは異なるものを参照しようとしているようですが、入力ミスでしょうか

html

1<script type="text/javascript" src="js/jquery.slider-pro.min.js"></script>

投稿2017/04/19 11:51

fcrow

総合スコア96

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

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

WPJ

2017/04/19 16:13

上記のコメントでようやくわかりました。 以下のサイトを見て、コピペで更新していたのですが、 http://on-ze.com/archives/2717 ダウンロードしたファイルとこのサイトの記述が間違えていました。 <script src="jquery.slider-pro.min.js"></script>ではなく、 jquery.sliderPro.min.jsと記載したら動きました。 全く、私のイージーミスでした。 開発者ツールでエラー確認など、とても勉強になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問