slick.jsのオプションが利かない

前提・実現したいこと

ポートフォリオサイトをwordpressで作成中です。その中でカルーセルを
スライダープラグイン「Slick」を利用して作成中です
slickをダウンロードして手動のスライダーを作成できました、
オプションの自動再生やドットの画像選択などを再現したいです。

発生している問題・エラーメッセージ

手動のスライダーは行えるが、
スライダーの自動再生、ドットの画像選択が出てこない

該当のソースコード

JS
1$(function() {
2  $('.slider').slick({
3    dots:true,
4    autoplay:true,
5    arrows:true,
6  });
7});

php
1（（header.php）です）
2<!doctype html>
3<html lang="ja">
4  <head>
5    <!-- Required meta tags -->
6    <meta charset="utf-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    
9    <!-- Bootstrap CSS -->
10    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
12    <link rel="preconnect" href="https://fonts.gstatic.com">
13    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
14    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
15<!-- slick -->
16<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" />
17<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" />
18<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script>
19<!-- slick -->
20    <?php wp_head(); ?>
21  </head>
22  <body>
23    <header>
24      <nav class="container-fluid">
25        <div class="logoarea">
26          <h1><?php bloginfo( 'name' ); ?></h1>
27          <p><?php bloginfo( 'description' ); ?></p>      
28        </div>
29        <div class="mainmenu">
30          <ul class="menu-sns">
31            <li><a href="https://www.youtube.com/channel/UClrGIDI4B5oLk4dAA5BrS0g" target="_blank" rel="noopener noreferrer"><i class="fab fa-youtube fa-lg"></i></a>
32            </li>
33            <li>
34              <a href="https://www.instagram.com/ryo.webdesign_gourmet/"  target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram fa-lg"></i></a></li>
35            <li><a href="https://www.facebook.com/t.t.cry.p.q/"  target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f fa-lg"></i></a></li>
36            <li><a href="https://twitter.com/web59350062"  target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter fa-lg"></i></a></li>
37          </ul>
38          <?php wp_nav_menu( array('theme_location' => 'main-menu') );?>
39          <!-- <ul class="menu">
40            <li>
41              <a href="#">作品集</a>
42              <ul class="pulldown">
43                <li>ランディングページ</li>
44                <li>バナー作品</li>
45                <li>wordpressサイト</li>
46              </ul>
47            </li>
48            <li>
49              <a href="#">制作コラム</a>
50              <ul class="pulldown">
51                <li>Photoshop</li>
52                <li>adobeXD</li>
53                <li>wordpress</li>
54              </ul>
55            </li>
56            <li>
57              <a href="#">RYO DESIGNSとは</a>
58            </li>
59          </ul> -->
60        </div>
61        <div class="btn-hamburger">
62          <button>
63            <img src="<?php echo get_template_directory_uri(); ?>/images/btn-hamburger.png" alt="ハンバーガーボタン">
64          </button>
65        </div>
66        <div class="mainmenu-sp">
67          <div class="openmenu">
68            <div class="logoarea">
69              <h1>RYO DESIGNS</h1>
70              <p>Webデザインのポートフォリオサイト</p>      
71            </div>
72            <ul class="menu">
73              <li>作品集</li>
74              <li>制作コラム</li>
75              <li>RYO DESIGNSとは</li>
76            </ul>
77            <ul class="menu-sns">
78              <li><i class="fab fa-youtube fa-lg"></i></li>
79              <li><i class="fab fa-instagram fa-lg"></i></li>
80              <li><i class="fab fa-facebook-f fa-lg"></i></li>
81              <li><i class="fab fa-twitter fa-lg"></i></li>
82              <li class="contact">お問い合わせ</li>
83            </ul>
84          </div>
85        </div>
86      </nav>
87    </header>

php
1（index.phpです）
2<?php get_header(); ?>
3  <div> 
4    <ul class="container slider">
5      <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image01.jpg" alt="子供服" class="img-fluid"></li> 
6      <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image02.jpg" alt="コンサルタント" class="img-fluid"></li>
7      <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image03.jpg" alt="エンジニアブログヘッダー" class="img-fluid"></li>
8      <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image04.jpg" alt="車買取サイト" class="img-fluid"></li>
9      <li><img src="<?php echo get_template_directory_uri(); ?>/images/slider-image05.jpg" alt="ロッカー会社サイト" class="img-fluid"></li>
10    </ul>
11  </div>
12 <?php get_footer(); ?>
13

css
1.slider{
2  height: 300px;
3  padding:2rem 0;
4}
5.slider img{
6  margin: 0 auto ;
7  height: 300px;
8}

試したこと

・サーバーやgoogleのキャッシュの消去

よろしくお願いいたします。

追記（2021.7/7）

consoleで確認しましたら
「 Uncaught TypeError: Cannot read property 'add' of null」のエラー表示がありました。
ググって

Javascript
1$(function() {
2  $('.slider').not('.slick-initialized').slick({
3    dots:true,
4    autoplay:true,
5    arrows:true,
6  });
7});

と修正しましたら、エラー表示はなくなって

$(function() {
$('.slider').not('.slick-initialized').slick({
dots:true,
autoplay:true,
arrows:true,
});
});
S.fn.init [document]とconsole画面に出るようになりましたが、
変化しません。