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

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>

開発者ツールのエラー画像になります。

kei344

2017/04/18 11:13

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

WPJ

2017/04/18 13:06

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

yuki84web

2017/04/18 14:24

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

kei344

2017/04/18 16:23

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

WPJ

2017/04/19 11:37

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

行動規範の内容に同意します

回答2件

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

総合スコア69625

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こねくり回して理解しました！疑問に答えていただきありがとうございます！

行動規範の内容に同意します

ベストアンサー

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と記載したら動きました。全く、私のイージーミスでした。開発者ツールでエラー確認など、とても勉強になりました。ありがとうございました。

行動規範の内容に同意します

あなたの回答