sliderの実装について

jQueryのプラグインsliderの実装（初めて）がうまくできません。
画像は３枚表示なのですが１枚しか画面に出ません。
何がいけないか教えていただけると大変助かります。

**head終了タグ直前にslickのCSSと自作のCSSの2つを読み込んでます。
**

HTML
1<!--==============レイアウトを制御する独自のCSSを読み込み===============-->
2  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
3  <link rel="stylesheet" type="text/css" href="css/portfolio.css">
4
5------------------<body>内-------------------------------------------------------------
6<ul class="slider">　**href内は後から違うリンクをいれます**
7        <li>
8          <a href="#" target="_blank"><img src="img/bagsite.jpg" alt=""></a>
9        </li>
10        <li>
11          <a href="#" target="_blank"><img src="img/fitnesssite.jpg" alt=""></a>
12        </li>
13        <li>
14          <a href="#" target="_blank"><img src="img/hotelsite.jpg" alt=""></a>
15        </li>
16      </ul>
17
18
19**body 終了タグ直前に jQuery、slick、動きを制御する自作のJS の3 つを読み込んでます。**
20<script src="https://code.jquery.com/jquery-3.4.1.min.js"
21    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
22<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
23<script src="js/portfolio.js"></script>
24</body>

css
1.slider {
2    /*横幅94%で左右に余白を持たせて中央寄せ*/
3    width: 94%;
4    margin: 0 auto;
5}
6
7.slider img {
8    width: 60vw;
9    /*スライダー内の画像を60vwにしてレスポンシブ化*/
10    height: auto;
11}
12
13.slider .slick-slide {
14    transform: scale(0.8);
15    /*左右の画像のサイズを80%に*/
16    transition: all .5s;
17    /*拡大や透過のアニメーションを0.5秒で行う*/
18    opacity: 0.5;
19    /*透過50%*/
20}
21
22.slider .slick-slide.slick-center {
23    transform: scale(1);
24    /*中央の画像のサイズだけ等倍に*/
25    opacity: 1;
26    /*透過なし*/
27}
28
29
30/*矢印の設定*/
31
32/*戻る、次へ矢印の位置*/
33.slick-prev,
34.slick-next {
35    position: absolute;
36    /*絶対配置にする*/
37    top: 42%;
38    cursor: pointer;
39    /*マウスカーソルを指マークに*/
40    outline: none;
41    /*クリックをしたら出てくる枠線を消す*/
42    border-top: 2px solid #666;
43    /*矢印の色*/
44    border-right: 2px solid #666;
45    /*矢印の色*/
46    height: 15px;
47    width: 15px;
48}
49
50.slick-prev {
51    /*戻る矢印の位置と形状*/
52    left: -1.5%;
53    transform: rotate(-135deg);
54}
55
56.slick-next {
57    /*次へ矢印の位置と形状*/
58    right: -1.5%;
59    transform: rotate(45deg);
60}
61
62/*ドットナビゲーションの設定*/
63
64.slick-dots {
65    text-align: center;
66    margin: 20px 0 0 0;
67}
68
69.slick-dots li {
70    display: inline-block;
71    margin: 0 5px;
72}
73
74.slick-dots button {
75    color: transparent;
76    outline: none;
77    width: 8px;
78    /*ドットボタンのサイズ*/
79    height: 8px;
80    /*ドットボタンのサイズ*/
81    display: block;
82    border-radius: 50%;
83    background: #ccc;
84    /*ドットボタンの色*/
85}
86
87.slick-dots .slick-active button {
88    background: #333;
89    /*ドットボタンの現在地表示の色*/
90}
91

js
1$('.slider').slick({
2    autoplay: true,//自動的に動き出すか。初期値はfalse。
3    infinite: true,//スライドをループさせるかどうか。初期値はtrue。
4    speed: 500,//スライドのスピード。初期値は300。
5    slidesToShow: 3,//スライドを画面に3枚見せる
6    slidesToScroll: 1,//1回のスクロールで1枚の写真を移動して見せる
7    prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
8    nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
9    centerMode: true,//要素を中央ぞろえにする
10    variableWidth: true,//幅の違う画像の高さを揃えて表示
11    dots: true,//下部ドットナビゲーションの表示
12  });