カスタム投稿詳細をモーダルにしたら挙動がおかしい

投稿一覧から詳細ページをsingle-**.phpを使わずにswiperとJSの組み合わせでモーダル＋スライドさせたいのですが、モーダルの中身が必ず一番新しい投稿になってしまってクリックした内容が表示されません。

data-slide-index=”<?php the_ID(); ?>”で投稿のID取得、JSでも指定しているのですがうまく行かず、、、
どなたかご教示いただけませんでしょうか。

なお、swiperはCDNで読み込みしております。

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

【phpコード内容】
一覧部分

<ul class="swiperModalButton">
<?php
    $args = [
    'post_type' => 'achievement', // カスタム投稿名
    'posts_per_page' => 30, // 表示させる数
    'paged' => $paged,
    ];
    $my_query = new WP_Query($args); ?>
    <?php if ($my_query->have_posts()): ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li class="modalOpen" data-slide-index="<?php the_ID(); ?>">
            <?php if(has_post_thumbnail()): ?>
            <img src="<?php the_post_thumbnail_url(''); ?>">
            <?php endif; ?>
            <h3><?php the_title(); ?></h3>
    </li>
    <?php endwhile; ?>
    <?php else: ?>
<?php endif; wp_reset_postdata(); ?>  
</ul>

モーダル中身

<div class="modal" id="modal">
<div class="modal__overlay modalClose"></div>
<div class="modal__content">
    <div class="modal_inner">
        <div class="modal__close-btn modalClose" aria-label="閉じる"><i class="fa-regular fa-circle-xmark"></i></div>
        <!-- スライダー -->
        <div class="swiper modalInSlider">
            <ul class="swiper-wrapper">
                <?php
                    $args = [
                    'post_type' => 'achievement',
                    'posts_per_page' =>100,
                    ];
                    $my_query = new WP_Query($args); ?>
                    <?php if ($my_query->have_posts()): ?>
                    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
                <li class="swiper-slide modalInSlider">
                <?php if( get_field('***') ): ?>
                    <img src="<?php the_field('***'); ?>" />
                <?php endif; ?>
                </li>
                    <?php endwhile; ?>
                    <?php else: ?>
                    <?php endif; wp_reset_postdata(); ?>
            </ul>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

【JSコード内容】

//modal
window.addEventListener("DOMContentLoaded", () => {
  // モーダルを取得
  const modal = document.getElementById("modal");
  // モーダルを開く
  const openModalBtns = document.querySelectorAll(".modalOpen");
  // モーダルを閉じる
  const closeModalBtns = document.querySelectorAll(".modalClose");

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

  // モーダルの閉じるボタンクリック
  closeModalBtns.forEach((closeModalBtn) => {
    closeModalBtn.addEventListener("click", () => {
      modal.classList.remove("is-active");
    });
  });

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

});

参照した参考記事はこちら：
素のJSとSwiperでモーダル内にスライダーを表示する方法
JavaScriptのSwiperをモーダルでスライダー・カルーセル表示

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

• このトピックはkarashiが2年前に変更しました。
• このトピックはkarashiが2年前に変更しました。
• このトピックはkarashiが2年前に変更しました。