[jQuery]ハンバーガーメニュー、カルーセルを実装する

実現したいこと

jQueryでハンバーガーメニュー、カルーセルを実装する

前提

ハンバーガーメニューのみ実装した際は正常に稼働していたのですが、
カルーセルを追加した途端に稼働しなくなりました。

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

エラーなし

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- CSS読込 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Googleフォント -->
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/cf80f90314.js" crossorigin="anonymous"></script>
    <!-- Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link href="css/style.css" rel="stylesheet">

</head>

<body>

    <!-- ヘッダー -->
    <header class="header">
        <!-- ロゴ -->
        <a href="#"><img src="" alt="" class="header-logo"></a>

        <!-- ハンバーガーボタン -->
        <button type="button" class="hamburger-button">
            <i class="fas fa-bars"></i>
        </button>
    </header>

    <!-- ナビゲーション -->
    <div class="hamburger-menu">
        <nav class="hamburger-menu-nav">
            <ul class="hamburger-menu-nav-list header-nav-list-group">
                <li class="hamburger-menu-nav-list-item"><a href="#feature ">施設概要</a></li>
                <li class="hamburger-menu-nav-list-item"><a href="#access">アクセス</a></li>
                <li class="hamburger-menu-nav-list-item"><a href="#faq">お問合せ</a></li>
            </ul>
        </nav>
    </div>

    <!-- メイン -->
    <main class="main">

        <!-- カバー -->
        <section class="cover">
            <!-- カバー上部・カルーセル -->
            <div class="cover-slick">

                <!-- カルーセル1 -->
                <div class="cover-slick-item">
                    <picture>
                        <!-- SP -->
                        <source media="(max-width: 767px)" srcset="image/cover_01_sp.jpg">
                        <!-- PC -->
                        <source media="(min-width: 768px)" srcset="image/cover_01_pc.jpg">
                        <img class="cover-img" src="image/cover_01_pc.jpg" alt="">
                    </picture>
                </div>

                <!-- カルーセル2 -->
                <div class="cover-slick-item">
                    <picture>
                        <!-- SP -->
                        <source media="(max-width: 767px)" srcset="image/cover_02_sp.jpg">
                        <!-- PC -->
                        <source media="(min-width: 768px)" srcset="image/cover_02_pc.jpg">
                        <img class="cover-img" src="image/cover_02_pc.jpg" alt="">
                    </picture>
                </div>

                <!-- カルーセル3 -->
                <div class="cover-slick-item">
                    <picture>
                        <!-- SP -->
                        <source media="(max-width: 767px)" srcset="image/cover_03_sp.jpg">
                        <!-- PC -->
                        <source media="(min-width: 768px)" srcset="image/cover_03_pc.jpg">
                        <img class="cover-img" src="image/cover_03_pc.jpg" alt="">
                    </picture>
                </div>
            </div>
        </section>
    </main>



    <!-- JavaScript読込 -->
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- カルーセル -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <!-- main.js -->
    <script src="js/main.js"></script>

</body>

</html>

CSS

@charset "UTF-8";
/* 文字コードの指定 */


body {
    font-family: "Noto Sans JP", sans-serif, "Noto Serif JP", serif;
    line-height: 1.75;
}
a {
    color: #000;
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
li {
    list-style: none;
}

/* フォント:個別指定
───────────────────────────────── */
.serif {
    font-family: "Noto Serif JP", serif;
    font-weight: 500;
}

/* ヘッダー調整/最大横幅指定【SP】
  ───────────────────────────────── */
.header {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 3.7rem;
    background-color: #fff;
    padding-left: 0.96rem;
}

/* ヘッダー:タイトル
  ───────────────────────────────── */
@media (max-width: 767px) {
.header-title {
    color: #fff;
    font-size: 1.14rem;
    font-weight: bold;
    padding-left: 2rem;
    padding-top: 0.2rem;
    line-height: 1rem;
}

.header span {
    font-size: 0.5rem;
}
}

/* ヘッダー:ハンバーガーボタン
  ───────────────────────────────── */
.hamburger-button {
    position: fixed;
    right: 0.9rem;
    top: 0.74rem;
    font-size: 2rem;
    color: #606060;
    line-height: 2rem;
}

/* ハンバーガーメニュー:SP表示のみに指定
  ───────────────────────────────── */
@media (max-width: 767px) {
    .hamburger-menu {
        position: fixed;
        z-index: 1;
        top: 3.8rem;
        height: 6.64rem;
        width: 100%;
        background-color: rgb(255,255,255,70%);
        opacity: 0;
        visibility: hidden;
}
}



/* ハンバーガー:ナビゲーション【SP】
  ───────────────────────────────── */
@media (max-width: 767px) {
    .hamburger-menu-nav {
        display: flex;
        line-height: 1.63rem;
        font-size: 1rem;
        margin-top: 0.8rem;
        margin-left: 0.86rem;
    }
}

@media (max-width: 767px) {
.cover-img {
    margin-top: 3.8rem;
    width: 100%;
}
}

Javascript

/* ハンバーガーメニュー */
var hamburger = $('.hamburger-menu');

$('.hamburger-button').on('click', function () {
    hamburger.toggleClass('hamburger-menu-active');
});

$(window).on('resize', function () {
    hamburger.removeClass('hamburger-menu-active');
});


/* カルーセル */
$('.cover-slick').slick({
    infinite: true,
    dots: false,
    autoplay: true,
    arrows: false,
    fade: true,
    autoplaySpeed: 3000
});