Почему ломается порядок слайдов после переключения и закрытия слайдера при использовании virtual?

Question

Имеется галерея изображений. При клике на любое изображение в этой галерее показывается созданный слайдер, в качестве текущего изображения показывается то, которое было нажато, слайды переключаются без проблем.

Но если попереключать изображения и потом закрыть слайдер (без перезагрузки страницы, просто через ESC или ЛКМ по области рядом с изображением), то повторное открытие слайдера может иметь непредсказуемые последствия: то порядок изображений ломается, то изображения в слайдере дублируются. Помогает только перезагрузка страницы, что, конечно же, не является выходом из положения. Собственно, вопрос мой в том, как это исправить, чтобы элементы не путались/мешались/затирались.

Использую virtual, поскольку изображения в слайдер беру из галереи, которая находится в другом месте текущей HTML-страницы. Таким образом, есть несколько вкладок с галереями, и при переключении вкладки в слайдер будет заноситься новый набор изображений.

Вот так выглядит участок JS- и HTML-кода с каркасом слайдера и одной из галерей:

document.addEventListener("DOMContentLoaded", () => {
  let swiper;

  const swiperWrapper = document.querySelector(".swiper-wrapper");

  let images = Array.from(document.querySelectorAll(`#wedding > img`));
  let imagesForSwiper = images.map(
    (image) =>
      "<div class='swiper-zoom-container'>" + image.outerHTML + "</div>"
  );

  // for (let image of images.entries()) {
  images.forEach((image) => {
    image.addEventListener("click", () => {
      // currentSlide = index;
      document.querySelector(".swiper").classList.remove("hidden");
      openSwiper();
      swiper.slideTo(+image.dataset.id, 0);

      setTimeout(() => {
        document.addEventListener("click", closeSwiperOnOutsideClick);
      }, 0);
      document.addEventListener("keydown", closeSwiperOnEsc);
    });
  });

  function closeSwiperOnEsc(event) {
    if (event.key === "Escape") closeSwiper();
  }

  function closeSwiperOnOutsideClick(event) {
    if (
      event.target.closest(".swiper") &&
      !event.target.closest(".swiper-button-prev") &&
      !event.target.closest(".swiper-button-next") &&
      !event.target.closest(".gallery-image")
    )
      closeSwiper();
  }

  function closeSwiper() {
    swiperWrapper.innerHTML = "";
    swiper = null;
    document.querySelector(".swiper").classList.add("hidden");
    document.removeEventListener("keydown", closeSwiperOnEsc);
    document.removeEventListener("click", closeSwiperOnOutsideClick);
  }

  function openSwiper() {
    swiper = new Swiper(".swiper", {
      speed: 400,
      loop: true,
      zoom: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      keyboard: {
        enable: true,
        onlyInViewport: false,
      },
      virtual: {
        enabled: true,
        slides: imagesForSwiper,
      },
    });
  }

});

<main>
  <nav class="tab-menu mb-3">
    <div class="active" data-tab="wedding">Wedding dresses</div>
    <div class="" data-tab="coctail">Coctail dresses</div>
    <div class="" data-tab="informal">Informal wear</div>
  </nav>

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

  <section class="photo-gallery">
    <div data-tab-content id="wedding">
      <img
        src="./assets/gallery/compressed/pexels-cottonbro-studio.jpg"
        alt="Photo 1"
        class="gallery-image"
        loading="lazy"
        data-id="0"
      />
      <img
        src="./assets/gallery/compressed/pexels-leeloo-thefirst.jpg"
        alt="Photo 2"
        class="gallery-image"
        loading="lazy"
        data-id="1"
      />
      <img
        src="./assets/gallery/compressed/pexels-redheart-li.jpg"
        alt="Photo 3"
        class="gallery-image"
        loading="lazy"
        data-id="2"
      />
      <img
        src="./assets/gallery/compressed/pexels-snezhana.jpg"
        alt="Photo 7"
        class="gallery-image"
        loading="lazy"
        data-id="3"
      />
      <img
        src="./assets/gallery/compressed/pexels-thegiansepillo.jpg"
        alt="Photo 8"
        class="gallery-image"
        loading="lazy"
        data-id="4"
      />
    </div>
  </section>
</main>

БЛОГ НА HUSL

Почему ломается порядок слайдов после переключения и закрытия слайдера при использовании virtual?

Ответы (0 шт):