slickで二段サムネイルのスライダーができない

実現したいこと

ここに実現したいことを箇条書きで書いてください。

https://junpei-sugiyama.com/slick-thumbnail/の↓これを再現したい

前提

vscodeでslickで二段サムネイルのスライダーを実装したいです。
しかしながらhttps://junpei-sugiyama.com/slick-thumbnail/のソースコードをコピペしても二段サムネイル二ならず自動的に一行サムネイルになってしまいます。
どうすれば二段サムネイルにできるのでしょうか。
どなたかお助け下さい。お願い致します

該当のソースコード

swiper.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="swiper.css">
8   
9    
10     <!-- slick_CSS -->
11<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
12<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" />
13<!-- jQuery -->
14<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
15<!-- slick_JS -->
16<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif"></script>
17<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
18</body>
19    <title>スワイパー</title>
20</head>
21<body>
22  <div class="container">
23    <div class="slider">
24      <div class="slick-img">
25        <img
26          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg"
27          alt=""
28        />
29      </div>
30      <div class="slick-img">
31        <img
32          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg"
33          alt=""
34        />
35      </div>
36      <div class="slick-img">
37        <img
38          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg"
39          alt=""
40        />
41      </div>
42      <div class="slick-img">
43        <img
44          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog04.jpg"
45          alt=""
46        />
47      </div>
48      <div class="slick-img">
49        <img
50          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog05.jpg"
51          alt=""
52        />
53      </div>
54      <div class="slick-img">
55        <img
56          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog06.jpg"
57          alt=""
58        />
59      </div>
60    </div>
61    <div class="thumbnail">
62      <div class="thumbnail-img">
63        <img
64          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg"
65          alt=""
66        />
67      </div>
68      <li class="thumbnail-img">
69        <img
70          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg"
71          alt=""
72        />
73      </li>
74      <div class="thumbnail-img">
75        <img
76          src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg"
77          alt=""
78        />
79      </div>
80      <div class="thumbnail-img">
81        <img
82          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog04.jpg"
83          alt=""
84        />
85      </div>
86      <div class="thumbnail-img">
87        <img
88          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog05.jpg"
89          alt=""
90        />
91      </div>
92      <div class="thumbnail-img">
93        <img
94          src="https://junpei-sugiyama.com/wp-content/uploads/2021/08/dog06.jpg"
95          alt=""
96        />
97      </div>
98    </div>
99  </div>
100  
101  
102  
103  
104  <script>
105   $(function () {
106  $(".slider").slick({
107    autoplay: false,
108    arrows: false,
109    fade: true,
110    asNavFor: ".thumbnail",
111  });
112  $(".thumbnail").slick({
113    slidesToShow: 6,
114    asNavFor: ".slider",
115    focusOnSelect: true,
116  });
117});
118  </script>
119    
120</html>

swiper.css
1body {
2  background-color: #ccc;
3}
4.container {
5  margin: 30px auto 0;
6  max-width: 300px;
7  width: 100%;
8}
9img {
10  height: auto;
11  width: 100%;
12}
13.thumbnail .slick-track {
14  transform: unset !important;
15}
16.thumbnail-img {
17  opacity: 0.3;
18  transition: opacity .3s linear;
19  width: calc(100% / 3) !important;
20}
21.thumbnail .slick-current {
22  opacity: 1;
23}

エラーメッセージ

とあるので調べると外部jsが読み込まれていないんでしょうか？スライダーの機能は動いてはいるのですが。

試したこと

.slick-slide{
width:33%;
}
にしても意味ありませんでした。

また、

 <!-- slick_CSS -->

<title>スワイパー</title>

</head> ↑このように、<link rel="stylesheet" href="swiper.css">をheadの一番下に読み込ませても意味ありませんでした。

loving

2023/05/12 01:55

CDN読み込みの部分を <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> に変えたらできそうです