slickによるスライダーが実装できません、、

Bootstrapで作成したカードを、slickを使用して、水平にスライドさせようとしています。
縦にカードが並び全く動きもしない状態なので、テスト的にシンプルに画像３枚をスライドさせようとしたところそちらも縦に並び動きません。

素人なので根本的な誤りかなと思うのですが、、
もう解決策が分からず、お知恵を頂けますと幸いです。

私の状況を下記お伝えします。
①slickをダウンロードし以下ファイルを保存しました。
【CSSフォルダ内】
・slick-theme.css
・slick.css　
【jsフォルダ内】
・slick.min.js

html
1<head>
2<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
3<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
4*
5<div class="your-class">
6  <div><img src="images/1-2.png" alt=""></div>
7  <div><img src="images/1.png" alt=""></div>
8  <div><img src="images/2-2.png" alt=""></div>
9</div>
10*
11<script>
12$(function(){
13$('.your-class').slick();
14});
15</script>
16*
17<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
18<script type="text/javascript" src="slick/slick.min.js"></script>
19</body>

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

回答1件

ベストアンサー

ひとまずCDNでの再現例を書きます。

HTML
1<head>
2  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
3  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
4  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
5  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
6</head>
7<body>
8<div class="your-class">
9  <div><img src="https://4.bp.blogspot.com/-Xce-5TfWV2E/XDXcmL1iOzI/AAAAAAABRLQ/RlZsBIYJvRUisHAZ1XnvbCiEgNQceq9LACLcBGAs/s400/pose_ukkari_man.png" alt=""></div>
10  <div><img src="https://4.bp.blogspot.com/-Xce-5TfWV2E/XDXcmL1iOzI/AAAAAAABRLQ/RlZsBIYJvRUisHAZ1XnvbCiEgNQceq9LACLcBGAs/s400/pose_ukkari_man.png" alt=""></div>
11  <div><img src="https://4.bp.blogspot.com/-Xce-5TfWV2E/XDXcmL1iOzI/AAAAAAABRLQ/RlZsBIYJvRUisHAZ1XnvbCiEgNQceq9LACLcBGAs/s400/pose_ukkari_man.png" alt=""></div>
12</div>
13<script>
14$(function() {
15  $('.your-class').slick();
16});
17</script>
18</body>