html/css コピペコードが動かない

#やってみたいこと

ウェブページのデザインに興味があり、html/css初心者ですが少し背伸びをしてネットに公開されているスライダーデザインのコピペ用サンプルコードを使ってみたのですが、何故か動きません。半分に割れて次に行くと言ったデザインのはずなのですが、１個目で硬直して動かなくなっています。

#該当コード
htmlファイルの中に、cssとjsのものを全て埋め込んでいます
（長くて申し訳ありません）：

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset='UTF-8'>
5    <title>
6    Portfolio
7    </title>
8    <style>
9    body,
10html {
11  height: 100%;
12  background: #110101;
13  font-family: 'Roboto', sans-serif;
14  overflow: hidden;
15}
16
17.slideshow {
18  position: absolute;
19  z-index: 1;
20  top: 0;
21  left: 0;
22  width: 100vw;
23  height: 100vh;
24  overflow: hidden;
25}
26.slideshow .slider {
27  width: 100vw;
28  height: 100vw;
29  z-index: 2;
30}
31.slideshow .slider * {
32  outline: none;
33}
34.slideshow .slider .item {
35  height: 100vh;
36  width: 100vw;
37  position: relative;
38  overflow: hidden;
39  border: none;
40}
41.slideshow .slider .item .text {
42  display: none;
43}
44.slideshow .slider .item img {
45  min-width: 101%;
46  min-height: 101%;
47  position: absolute;
48  top: 50%;
49  left: 50%;
50  -webkit-transform: translate(-50%, -50%);
51          transform: translate(-50%, -50%);
52}
53.slideshow .slick-dots {
54  position: fixed;
55  z-index: 100;
56  width: 40px;
57  height: auto;
58  bottom: auto;
59  top: 50%;
60  right: 0;
61  -webkit-transform: translateY(-50%);
62          transform: translateY(-50%);
63  left: auto;
64  color: #fff;
65  display: block;
66}
67.slideshow .slick-dots li {
68  display: block;
69  width: 100%;
70  height: auto;
71}
72.slideshow .slick-dots li button {
73  position: relative;
74  width: 20px;
75  height: 15px;
76  text-align: center;
77}
78.slideshow .slick-dots li button:before {
79  content: '';
80  background: #fff;
81  color: #fff;
82  height: 2px;
83  width: 20px;
84  border-radius: 0;
85  position: absolute;
86  top: 50%;
87  right: 0;
88  left: auto;
89  -webkit-transform: translateY(-50%);
90          transform: translateY(-50%);
91  -webkit-transition: all .3s ease-in-out;
92  transition: all .3s ease-in-out;
93  opacity: 0.6;
94}
95.slideshow .slick-dots li.slick-active button:before {
96  width: 40px;
97  opacity: 1;
98}
99.slideshow.slideshow-right {
100  left: 0;
101  z-index: 1;
102  width: 50vw;
103  pointer-events: none;
104}
105.slideshow.slideshow-right .slider {
106  left: 0;
107  position: absolute;
108}
109
110.slideshow-text {
111  position: absolute;
112  top: 50%;
113  left: 50%;
114  -webkit-transform: translate(-50%, -50%);
115          transform: translate(-50%, -50%);
116  z-index: 100;
117  font-size: 80px;
118  width: 100vw;
119  text-align: center;
120  color: #fff;
121  font-family: 'Roboto Condensed', sans-serif;
122  font-weight: 100;
123  pointer-events: none;
124  text-transform: uppercase;
125  letter-spacing: 20px;
126  line-height: 0.8;
127}
128@media (max-width: 767px) {
129  .slideshow-text {
130    font-size: 40px;
131  }
132}
133
134.the-most {
135  position: fixed;
136  z-index: 1;
137  bottom: 0;
138  left: 0;
139  width: 50vw;
140  max-width: 200px;
141  padding: 10px;
142}
143.the-most img {
144  max-width: 100%;
145}
146    </style>
147    </head>
148
149
150
151
152
153
154
155
156
157<body>
158<script type="text/javascript">
159var $slider = $('.slideshow .slider'),
160  maxItems = $('.item', $slider).length,
161  dragging = false,
162  tracking,
163  rightTracking;
164
165$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));
166
167rightItems = $('.item', $sliderRight).toArray();
168reverseItems = rightItems.reverse();
169$('.slider', $sliderRight).html('');
170for (i = 0; i < maxItems; i++) {
171  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
172}
173
174$slider.addClass('slideshow-left');
175$('.slideshow-left').slick({
176  vertical: true,
177  verticalSwiping: true,
178  arrows: false,
179  infinite: true,
180  dots: true,
181  speed: 1000,
182  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
183}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
184
185  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
186    $('.slideshow-right .slider').slick('slickGoTo', -1);
187    $('.slideshow-text').slick('slickGoTo', maxItems);
188  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
189    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
190    $('.slideshow-text').slick('slickGoTo', -1);
191  } else {
192    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
193    $('.slideshow-text').slick('slickGoTo', nextSlide);
194  }
195}).on("mousewheel", function(event) {
196  event.preventDefault();
197  if (event.deltaX > 0 || event.deltaY < 0) {
198    $(this).slick('slickNext');
199  } else if (event.deltaX < 0 || event.deltaY > 0) {
200    $(this).slick('slickPrev');
201  };
202}).on('mousedown touchstart', function(){
203  dragging = true;
204  tracking = $('.slick-track', $slider).css('transform');
205  tracking = parseInt(tracking.split(',')[5]);
206  rightTracking = $('.slideshow-right .slick-track').css('transform');
207  rightTracking = parseInt(rightTracking.split(',')[5]);
208}).on('mousemove touchmove', function(){
209  if (dragging) {
210    newTracking = $('.slideshow-left .slick-track').css('transform');
211    newTracking = parseInt(newTracking.split(',')[5]);
212    diffTracking = newTracking - tracking;
213    $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
214  }
215}).on('mouseleave touchend mouseup', function(){
216  dragging = false;
217});
218
219$('.slideshow-right .slider').slick({
220  swipe: false,
221  vertical: true,
222  arrows: false,
223  infinite: true,
224  speed: 950,
225  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
226  initialSlide: maxItems - 1
227});
228$('.slideshow-text').slick({
229  swipe: false,
230  vertical: true,
231  arrows: false,
232  infinite: true,
233  speed: 900,
234  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
235});
236console.log("JavaScriptを実行しています");
237</script>
238
239
240
241
242<div class="split-slideshow">
243  <div class="slideshow">
244    <div class="slider">
245      <div class="item">
246        <img src="a.jpg" />
247      </div>
248      <div class="item">
249        <img src="b.jpg" />
250      </div>
251      <div class="item">
252        <img src="c.jpg" />
253      </div>
254      <div class="item">
255        <img src="d.jpg" />
256      </div>
257    </div>
258  </div>
259  <div class="slideshow-text">
260    <div class="item">A</div>
261    <div class="item">B</div>
262    <div class="item">C</div>
263    <div class="item">D</div>
264  </div>
265</div>
266</html>

#やってみたこと
cssのバージョンが違うのではないかと思ったのですが、htmlファイルに全て纏めてcssファイルも入れてしまっているせいか、バージョンが確認できませんでした。調べても自分の知りたい情報に行き着けなかったので、お力添えいただける箇所がございましたら宜しくお願い申し上げます。大変に雑な形での質問をお許しください。

#環境
Model: MacBook Pro 13
Version: macOS 10.15.7

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

回答2件

var $slider = $('.slideshow .slider'),

これはjQueryの「セレクタ」を指定して要素を得る記法です。
Selectors | jQuery API Documentation

jQueryはJavaScriptのライブラリです。
ですので、そのライブラリ本体を読み込んでないと使えません。
ブラウザ開発ツールのコンソールを確認すると$ is unidefinedのようなエラーが出ているはずです。
jQuery本体を読み込んでください。
（調べてください）

もちろんjQuery本体だけで済むとは限りませんが、そこはエラーが出ているならエラーを解消しながら進めていってください。

投稿2020/10/14 11:05

m.ts10806

総合スコア80875

kay_ventris4

2020/10/15 14:40

jquery.comから、Download the compressed, production jQuery 3.5.1というのを押し、ダウンロードしたjsファイルを件のhtmlファイルと同じディレクトリに置いて、<script src="jquery-3.5.1.min.js"></script>を<head>タグ内に入れたのですが、特に変化はありませんでした。そこが問題ではないのでしょうかね…

m.ts10806

2020/10/15 22:01

回答にはjQueryのことだけを言及してないので確認、試行してください

m.ts10806

2020/10/15 23:14

エラー確認してますか？ブラウザのデベロッパーツール→コンソール jQuery設置するだけでもまだエラーは出ています。 jQueryのプラグインでも利用してるのではないでしょうか。ただ、それでもまだ動かないでしょうね。ここは基本的なことなのですが、HTML内のコードは特に何も指定がなければ上から順番に読み込まれます。もしJavaScriptでHTMLの要素を操作しているとして、対象のHTML要素が読み込まれていないときにその処理が来ていたら？「読み込まれていない要素」なので処理はできません。そのあたりも含めて精査してください。コードは書いたとおりにしか動かないので、内容をきちんと理解せずにコピペだけするのは非常に効率が悪いです。

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