Q&A
エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
前提・実現したいこと
jQuery初心者です。プラグインのslickの設置について質問です。
slickのサイトからファイルをダウンロード、フォルダー分けしてHTMLを書き、Google Chromeでファイルを開いて確認したところCSSは適用されていますが、画像が縦並びに表示されスライドされません。
jQueryの導入方法が間違っているのでしょうか。。？
どなたかお答えいただけると大変助かります。
該当のソースコード
HTML
1<!doctype html> 2<html> 3<head lang="en"> 4 <meta charset="utf-8"> 5 <title>slick sample</title> 6 <link rel="stylesheet" type="text/css" href="./css/style.css"> 7 <link rel="stylesheet" type="text/css" href="./css/slick.css"> 8 <link rel="stylesheet" type="text/css" href="./css/slick-theme.css"> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 10 11</head> 12<body> 13 <div class="slider"> 14 <ul> 15 <li><img src="image/sample1.jpg"></li> 16 <li><img src="image/sample2.jpg"></li> 17 <li><img src="image/sample3.jpg"></li> 18 <li><img src="image/sample4.jpg"></li> 19 <li><img src="image/sample5.jpg"></li> 20 <li><img src="image/sample6.jpg"></li> 21 </ul> 22 </div> 23 <script src="./js/slick.min.js"></script> 24 <script src="./js/main.js"></script> 25</body> 26</html> 27
js
1$('.slider').slick({ 2 autoplay:true, 3 autoplaySpeed:5000, 4 dots:true, 5}); 6
試したこと
jQueryの読み込みが正しく動作していないと思い、外部ファイルとして読み込みもしましたがそちらも動作しませんでした。
追記
― 作成中のHTMLにエラー表示はありません。
― プライベートブラウジング、別ブラウザ（Microsoft Edge）で開いても変わらず画像が縦並びです。
確認しましたが、エラー表記は何も書かれておりませんでした。。
ダウンロードしたサイトURLも追記していただけませんか？
https://kenwheeler.github.io/slick/
こちらから必要なファイルをダウンロードしました。
「縦並びに表示されており」は最初のスライダー例で、スクロールしていくと他のスライダーも出てきますが、これも全て動きませんか？
私が作成したページではエラーが表示されませんでしたが、ダウンロードしたファイルのサンプルページではエラーがいくつかありました。CSSファイルの読み込みがされていないのと、
$(...).slick is not a function
at HTMLDocument.<anonymous> (file:///C:/Users/...)
at HTMLDocument.dispatch (jquery-2.2.0.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.0.min.js:3)
at Object.trigger (jquery-2.2.0.min.js:4)
....
と表記されました。
各セクションのサンプルは全ての画像が縦並びに表示されています。
Chromeをプライベート ブラウジングにしても同じでしょうか。また、別ブラウザでも同じ状況でしょうか。
【プライベート ブラウジング - パソコン - Google Chrome ヘルプ】
https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=ja
質問は編集できますので適宜追記してください。
回答して頂きありがとうございます。
プライベートブラウジング、別ブラウザ（Microsoft Edge）でも同じ表示になります。
すみません、すぐに追記いたします。ありがとうございます。
ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。回答前に確認する必要があることを質問者とやり取りするエリアです。
「同じ表示」はダウンロードしたslickのファイルでしょうか。両方でしょうか。また、別ブラウザのほうでもエラーは確認できますか？
「ダウンロードしたファイルのサンプルにエラー表示」が当方環境では再現しません。「slick-1.8.1\index.html」のことですよね？
[slick-1.8.1.zip]フォルダーから[slick-1.8.1]フォルダーをデスクトップに移動させてファイルを開いたらサンプルが正常にスライド表示しました！
あなたの回答
tips
プレビュー
