前提・実現したいこと
slick導入して、センター寄り(両端に前後の画像が少し見えている)自動スライダーを作りたい。
以下、症状(画像1)と理想(画像2)。
発生している問題・エラーメッセージ
スライド式にならず、ただのリスト表示になる。
以下、エラーメッセージ。
×Failed to load resource: net::ERR_FILE_NOT_FOUND jquery.min.js:1
×slick.min.js:1 Uncaught ReferenceError: jQuery is not defined slick.min.js:1
at slick.min.js:1
at slick.min.js:1
×main.js:1 Uncaught SyntaxError: Unexpected token < main.js:1
該当のソースコード
◆配置状況は、
Dドライブ─サンプル ┏ index.html
-----------------------┣ 【css】─ index.css
-----------------------┣ 【images】─ スライダー用jpg700*350を4種
-----------------------┣ 【js】─ main.js
-----------------------┗ 【slick】 ┳【font】
------------------------------------┣ ajax-loader.gif
------------------------------------┣ slick.css
------------------------------------┣ slick-theme.css
------------------------------------┗ slick.min.js
◆index.htmlの内容は、
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="slick/slick.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="bannerslider">
<ul class="slider">
<li><a href="#"><img src="images/slider1.jpg" alt="image01"></a></li>
<li><a href="#"><img src="images/slider2.jpg" alt="image02"></a></li>
<li><a href="#"><img src="images/slider3.jpg" alt="image03"></a></li>
<li><a href="#"><img src="images/slider4.jpg" alt="image04"></a></li>
</ul>
</div>
</body>
</html>◆index.css部分は、
.bannerslider{
width: 1000px;
}◆main.js部分は、
<script type="text/javascript">
$('.slider').slick({
centerMode: true,
centerPadding: '100px',
dots:true,
focusOnSelect:true,
});
</script>◆slickフォルダのcssやjsはいじっておりません。
なお、ローカル環境での確認のため、
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
の部分にhttpをつけています。
試したこと
色々な解説サイトを見て実践してみました。
index.css以外は解説サイト記載のコードをコピペ。
補足情報（FW/ツールのバージョンなど）
slick1.7
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
<script src="slick/slick.min.js"></script>
<script src="js/main.js"></script>をbody閉じタグ直前に移動で解決しました。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
なお、ローカル環境での確認のため、
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
の部分にhttpをつけています。
http:// です。（コロン「:」が抜けています）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2019/09/25 22:37
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
tmr0513
2019/09/25 22:51
囲ませて頂きました。
あと、エラーメッセージも記載させていただきました。