swiperを用いて、モーダルの中にスライダーを作成する

WordPressを組み込んだサイトにおいてSwiperを用いて、モーダルの中にスライダーが入っているというを作っているのですが、

Uncaught TypeError: swiper.slideTo is not a function at HTMLLIElement.<anonymous>

というエラーが出てしまい、どうすればいいのか分かりません。
ちなみに、jsのswiper.slideToという表記をなくせば、モーダルは表示されますが、意図したスライドが出てこないという状況です。何が悪いのでしょうか？
教えてくださると嬉しいです。

PHP
1<dl class="p-event_article__row">
2    <dt class="p-event_article__ttl"><?php the_sub_field('title'); ?></dt>
3    <?php
4        $gallery = get_sub_field('gallery');
5        if( $gallery ){
6    ?>
7    <!-- ▼ モーダルコンテンツ ▼ -->
8    <dd class="p-event_article__ctn">
9        <!-- ▼ コンテンツ ▼ -->
10        <ul class="p-event_article__img">
11            <?php foreach ( $gallery as $key => $img ) { ?>
12            <li class="js-open-modal modal-cell" data-slide-index="<?php $i++; echo $i; ?>">
13                <img src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
14            </li>
15            
16            <?php } ?>
17        </ul>
18        <!-- ▼ モーダル ▼ -->
19        <div class="modal" id="modal">
20            <div class="modal__overlay js-close-modal"></div>
21            <div class="modal__content">
22                <button class="modal__close-btn js-close-modal" aria-label="閉じる">×</button>
23                <!-- スライダー -->
24                <div class="swiper modal__slider">
25                    <div class="swiper-wrapper">
26                        <?php foreach ( $gallery as $key => $img ) { ?>
27                            <div class="swiper-slide modal__slide">
28                                <img src="<?php echo $img; ?>" alt="<?php the_title(); ?>">
29                            </div>
30                        <?php } ?>
31                    </div>
32                    <div class="swiper-button-prev"></div>
33                    <div class="swiper-button-next"></div>
34                </div>
35            </div>
36        </div>
37    </dd>
38    <?php } ?>
39</dl>

CSS
1.modal {
2  position: fixed;
3  top: 0;
4  left: 0;
5  width: 100%;
6  height: 100vh;
7  padding: 30px;
8  display: flex;
9  align-items: center;
10  justify-content: center;
11  transition: opacity 0.3s;
12  pointer-events: none;
13  opacity: 0;
14  z-index: 100;
15  background-color: rgba(120, 123, 131, 0.8);
16}
17.modal.is-active {
18  opacity: 1;
19  pointer-events: auto;
20}
21.modal__overlay {
22  position: absolute;
23  width: 100%;
24  height: 100%;
25  cursor: pointer;
26}
27.modal__content {
28  position: relative;
29  background-color: #fff;
30  width: 100%;
31  max-width: 900px;
32  padding: 20px;
33}
34.modal__close-btn {
35  position: absolute;
36  right: 0;
37  top: 0;
38  width: 40px;
39  height: 40px;
40  background: #fff;
41  border: 1px solid #ccc;
42  cursor: pointer;
43  z-index: 10;
44}
45.modal-cell {
46  cursor: pointer;
47}
48.modal-cell:hover {
49  opacity: 0.6;
50}

JavaScript
1//モーダル修正
2window.addEventListener("DOMContentLoaded", () => {
3  // モーダルを取得
4  const modal = document.getElementById("modal");
5  // モーダルを表示するボタンを全て取得
6  const openModalBtns = document.querySelectorAll(".js-open-modal");
7  // モーダルを閉じるボタンを全て取得
8  const closeModalBtns = document.querySelectorAll(".js-close-modal");
9
10  // Swiperの設定
11  const swiper = new Swiper(".swiper", {
12    loop: true,
13    navigation: {
14      nextEl: ".swiper-button-next",
15      prevEl: ".swiper-button-prev",
16    },
17    spaceBetween: 30,
18  });
19
20  // モーダルを表示するボタンをクリックしたとき
21  openModalBtns.forEach((openModalBtn) => {
22    openModalBtn.addEventListener("click", () => {
23      const modalIndex = openModalBtn.dataset.slideIndex;
24      swiper.slideTo(modalIndex);
25      modal.classList.add("is-active");
26    });
27  });
28
29  // モーダルを閉じるボタンをクリックしたとき
30  closeModalBtns.forEach((closeModalBtn) => {
31    closeModalBtn.addEventListener("click", () => {
32      modal.classList.remove("is-active");
33    });
34  });
35});