Swiper + MicroModal — Как в модальном окне открыть изображение, по которому кликнули?

Question

[Dunno2018]

Сейчас на какое бы изображение не кликнули, открывается первое изображение. Пример кода:

<!-- Gallery Thumbnail Images -->
<div class="gallery-thumbs">
  <img src="image1.jpg" alt="" data-micromodal-open="reviews-gallery">
  <img src="image2.jpg" alt="" data-micromodal-open="reviews-gallery">
  <img src="image3.jpg" alt="" data-micromodal-open="reviews-gallery">
</div>

<!-- Image Modal -->
<div id="reviews-gallery" class="modal micromodal-slide" aria-hidden="true" data-micromodal-close>

  <div class="modal__overlay" tabindex="-1">

    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">

      <div class="swiper-container">

        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <img src="image1.jpg" alt="Image 1">
          </div>

          <div class="swiper-slide">
            <img src="image2.jpg" alt="Image 2">
          </div>

          <div class="swiper-slide">
            <img src="image3.jpg" alt="Image 3">
          </div>

        </div>

      </div>

    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

  </div>
</div>

MicroModal.init({
  openTrigger: 'data-micromodal-open',
  disableFocus: true,
  onShow: function(modal) {
    const image = document.querySelector(`img[data-micromodal-open="${modal.id}"]`)
    console.log(image)
    const swiper = new Swiper('.swiper-container', {
      initialSlide: Array.from(document.querySelectorAll('.swiper-slide img')).indexOf(image),
      effect: 'fade',
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    })
  },
})