slickのスライダーが実装できない（エラーの原因がわかりません）

以前slickを使用してスライダーを作成したのですが、そのコードをまたあとから使えるようにとMicrosoftwordにコピペして保存しておりました。
そしていざまた使おうと、VSCODEにワードのコードをコピペしたところ9つエラーがあるということで波線がたくさんひかれてしまいました。
もちろんこのコードでスライダーが実装できず。
以前作成したときは実装できていたはずなのですが、エラーになった原因がわかりません。
エラーで波線がひかれた部分を大文字小文字の関係かと思いもう一度入力しなおしてみたり、余白を消したりしたけど変わらず。

もしくはワードにいったんコピペするとうまくいかないことがあるのでしょうか？？
（ワードにコピペしたときはわかりやすく解説をつけておこうと思ってコードの文字に背景色などつけている部分もありました。）

エラー画面も添付させていただきます。

ファイル名の部分が「contents_demoslider.html　9＋」といった形で9つエラーがあるという表示があり、波線にマウスを乗せると様々なエラー表示がされます。

Unknown property: ' max-width'css(unknownProperties)
利用できるクイックフィックスはありません

Unknown property: ' margin'css(unknownProperties)
利用できるクイックフィックスはありません

Unknown property: ' height'css(unknownProperties)
利用できるクイックフィックスはありません

colon expectedcss(css-colonexpected)
利用できるクイックフィックスはありません

identifier expectedcss(css-identifierexpected)
利用できるクイックフィックスはありません

semi-colon expectedcss(css-semicolonexpected)
利用できるクイックフィックスはありません

Unknown property: ' display'css(unknownProperties)
利用できるクイックフィックスはありません

↓こちらの画像のようにブラウザ上ではスライドしておらず縦に箇条書きの点が並んでいる状態です。（本来であればaltに入力している「画像説明」という文字がスライドで動くようになっていると思うのですが…）

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5<meta charset="UTF-8">
6
7<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
8<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
9
10</head>
11
12
13<style>
14  /* スライダー全体の横幅と余白指定 */
15  .sliderArea {
16    max-width: 100%;
17    margin: 0 auto;
18    padding: 0 25px;
19  }
20/* 　スライダーの枠と画像の間の余白 */
21  .slick-slide {
22    margin: 0 5px;
23    height:auto;
24  }
25  /* 画像のサイズとはめ込み方の指定 */
26  .slick-slide img {
27   width:100%;
28   height:65vw;
29   object-fit:contain;
30  }
31  .slick-slider{
32    padding-left:0;
33  }
34  .slick-prev, .slick-next {
35    z-index: 1;
36  }
37  /* 左右の矢印の色*/
38  .slick-prev:before, .slick-next:before {
39    color: rgb(7, 7, 7);
40  }
41  .slick-slide {
42    transition: all ease-in-out .3s;
43    opacity: 0.2;
44  }
45  .slick-active {
46    opacity: 1;
47  }
48  .slick-current {
49    opacity: 1;
50  }
51 
52  /* 一瞬縦並びになるのを制御↓ */
53  .slider {
54  display: none;
55}
56.slider.slick-initialized {
57  display: block;
58}
59  /* 一瞬縦並びになるのを制御⇧ */
60    
61</style>
62  
63
64<body>
65  <div class="sliderArea">
66  <ul class="slider">
67    <li><a href="リンク先" target="_blank">
68<img src="画像URL" alt="画像説明"></a></li>
69    <li><a href="リンク先" target="_blank">
70<img src="画像URL" alt="画像説明"></a></li>
71<li><a href="リンク先" target="_blank">
72<img src="画像URL" alt="画像説明"></a></li>
73    <li><a href="リンク先" target="_blank">
74<img src="画像URL" alt="画像説明"></a></li>
75</ul>
76</div>
77
78
79
80<!-- jQuery -->
81<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
82
83<!-- slickのJavaScript -->
84<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
85
86<script>
87  $(function() {
88      $('.slider').slick({
89          autoplay: true, //自動でスライドするか否か
90          autoplaySpeed: 3000, //オートプレイの切り替わり時間
91          dots: true, //下の点々の有無
92          easing: 'ease-in-out', //スライドの動き方。ゆっくり始まってゆっくり終わる
93          fade:false,// フェードインフェードアウト（画像をふわっときりかえる）の有無
94          arrows:true, // 矢印の有無
95          pauseOnFocus: false,// フォーカスした際スライドが止まるかどうか
96         pauseOnHover: false  // マウスオーバーした際スライドが止まるかどうか
97      });
98  });
99  </script>
100
101
102</body>
103</html>
104

m.ts10806

2021/09/11 07:42

Wordで控えておくのは色んなもの勝手に付加するので是非でいうと非としても、提示されたコードで動作確認するとちゃんと動いてるように見えます。画像だけでは分からないのですが何のどういうエラーですか？

Lhankor_Mhy

2021/09/11 08:07

エラーメッセージもご提示ください。

Lhankor_Mhy

2021/09/11 08:10

ご提示のコードを試しにwordに貼り付けてからコピペしてみましたが、特段の問題は発生しませんでした。

poppoko

2021/09/11 08:25

ご確認いただきありがとうございました！以前はこちらで実装はできていたはずなので、なぜ今自分でできていないのか不明ですが… エラーは起きないということであればひとまず安心しました。

Lhankor_Mhy

2021/09/11 08:26

なんとなく、スペースが全角とかそれ系になっているような気がしますが、ご提示いただいているコードはそうはなっていない様子です。もしかすると、teratailに投稿した時に変換されるようなキャラクターだったのかもしれません。

Lhankor_Mhy

2021/09/11 08:28 編集

> エラーは起きないということであればひとまず安心しました。ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。

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

回答1件

自己解決

原因は結局不明のままでしたが、コードの記述自体は問題ないと分かったのでいったん解決といたします。全角半角など再度見直すこととします。

投稿2021/09/11 08:34

poppoko

総合スコア7

Lhankor_Mhy

2021/09/11 08:36

原因がわからなくてよいならば、この質問のコードをコピペしてきて使えばよいとおもいます。また、この質問のコードと、お手元のコードを比較することによって原因がわかるかもしれません。

poppoko

2021/09/11 21:18

ありがとうございます。このコードをコピペしてみたら確かに実装ができました。ワードからVSCODEに移すときに何かうまくいっていないのかもしれません。以前作成したときはワードで作成したのですが、パソコンを買い替えてワードがなくなり現在はワードパッドで表示しているのが何か関係しているのかもと思いました。

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