slickで上手くスライドショーが作れない。

前提・実現したいこと

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
<!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部分は、

css
.bannerslider{
width: 1000px;
}

◆main.js部分は、

javascript
<script type="text/javascript">
$('.slider').slick({
centerMode: true,
centerPadding: '100px',
dots:true,
focusOnSelect:true,
});
</script>

◆slickフォルダのcssやjsはいじっておりません。

なお、ローカル環境での確認のため、

kei344

2019/09/25 13:37

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error