Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error
前提・実現したいこと
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の内容は、
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>サンプル</title> 6<link rel="stylesheet" type="text/css" href="css/index.css"> 7<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" /> 8<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" /> 9<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 10<script src="slick/slick.min.js"></script> 11<script src="js/main.js"></script> 12</head> 13 14<body> 15<div id="bannerslider"> 16<ul class="slider"> 17<li><a href="#"><img src="images/slider1.jpg" alt="image01"></a></li> 18<li><a href="#"><img src="images/slider2.jpg" alt="image02"></a></li> 19<li><a href="#"><img src="images/slider3.jpg" alt="image03"></a></li> 20<li><a href="#"><img src="images/slider4.jpg" alt="image04"></a></li> 21</ul> 22</div> 23</body> 24</html>
◆index.css部分は、
css
1.bannerslider{ 2width: 1000px; 3}
◆main.js部分は、
javascript
1<script type="text/javascript"> 2$('.slider').slick({ 3centerMode: true, 4centerPadding: '100px', 5dots:true, 6focusOnSelect:true, 7}); 8</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
回答2件
0
自己解決
html
1<script src="slick/slick.min.js"></script> 2<script src="js/main.js"></script>
をbody閉じタグ直前に移動で解決しました。
投稿2019/09/25 14:18
総合スコア12
0
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> の部分にhttpをつけています。 `http://` です。（コロン「`:`」が抜けています）なお、ローカル環境での確認のため、
投稿2019/09/25 13:54
総合スコア69407
あなたの回答
tips
プレビュー
