モーダルウィンドの中でスライダーを実装するやりかた

業務でモーダルが3つあり、それぞれのindexで値を取りそれぞれがそれぞれにアクセスでき且つスライドできるもの。

<template>
<!-- コンテンツ -->
    <div class="content">
      <button class="js-open-modal" data-slide-index="1">スライド1を開く</button>
      <button class="js-open-modal" data-slide-index="2">スライド2を開く</button>
      <button class="js-open-modal" data-slide-index="3">スライド3を開く</button>
      <button class="js-open-modal" data-slide-index="4">スライド4を開く</button>
    </div>

    <!-- モーダル -->
    <div class="modal" id="modal">
      <div class="modal__overlay js-close-modal"></div>
      <div class="modal__content">
        <button class="modal__close-btn js-close-modal" aria-label="閉じる">×</button>
        <!-- スライダー -->
        <div class="swiper modal__slider">
          <div class="swiper-wrapper">
            <div class="swiper-slide modal__slide">スライド1</div>
            <div class="swiper-slide modal__slide">スライド2</div>
            <div class="swiper-slide modal__slide">スライド3</div>
            <div class="swiper-slide modal__slide">スライド4</div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
</template>
<script>
window.addEventListener("DOMContentLoaded", () => {
  // モーダルを取得
  const modal = document.getElementById("modal");
  // モーダルを表示するボタンを全て取得
  const openModalBtns = document.querySelectorAll(".js-open-modal");
  // モーダルを閉じるボタンを全て取得
  const closeModalBtns = document.querySelectorAll(".js-close-modal");

  // Swiperの設定
  const swiper = new Swiper(".swiper", {
    loop: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    spaceBetween: 30,
  });

  // モーダルを表示するボタンをクリックしたとき
  openModalBtns.forEach((openModalBtn) => {
    openModalBtn.addEventListener("click", () => {
      // data-slide-indexに設定したスライド番号を取得
      const modalIndex = openModalBtn.dataset.slideIndex;
      swiper.slideTo(modalIndex);
      modal.classList.add("is-active");
    });
  });

  // モーダルを閉じるボタンをクリックしたとき
  closeModalBtns.forEach((closeModalBtn) => {
    closeModalBtn.addEventListener("click", () => {
      modal.classList.remove("is-active");
    });
  });
});
</script>
<style>
@charset "UTF-8";

/* 簡易リセットCSS */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  background-color: rgba(120, 123, 131, 0.8);
}

/* モーダルがactiveの時 */
.modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* モーダル背景のオーバーレイ部分 */
.modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* モーダルのコンテンツ */
.modal__content {
  position: relative;
  background-color: #fff;
  width: 100%;
  max-width: 900px;
  padding: 20px;
}

/* モーダルを閉じるボタン */
.modal__close-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  z-index: 10;
}

/* Swiperの矢印部分 */
@media (max-width: 768px) {
  .modal .swiper-button-next,
  .modal .swiper-button-prev {
    display: none;
  }
}
</style>

表示させたい番号をslideToで設定出来る