let swiper;
function viewer() {
  swiper = new Swiper(".swiper", {
    direction: "horizontal",
    loop: true,
    enabled: true,
    zoom: true,
    pagination: {
      el: ".swiper-pagination",
    },
    on: {
      init: function () {
        this.on("slideNextTransitionStart", function () {
          console.log("Slide previous transition start");
          // Get current slide index
          var index = this.activeIndex;
          const slides = document.querySelectorAll(
            '[data-swiper-slide-index="' + index + '"]',
          );
          let current = slides[0];
          if (current) {
            const nodes = document.querySelectorAll(
              '[data-swiper-slide-index="' + index + '"] img',
            );
            for (let i = 0; i < nodes.length; i++) {
              let img = nodes[i];
              img.onload = function () {
                current.classList.add("loaded");
              };
              img.src = img.dataset.src;
            }
          }

          console.log("Current slide index: " + index);
        });

        // Next slide event
        this.on("slidePrevTransitionStart", function () {
          console.log("Slide next transition start");

          // Get current slide index
          var index = this.activeIndex;
          console.log("Current slide index: " + index);
        });
      },
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    keyboard: {
      enabled: true,
      onlyInViewport: false,
    },
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
  swiper.on("zoomChange", (_, scale) => {
    if (scale > 1) {
      swiper.allowSlideNext = false;
      swiper.allowSlidePrev = false;
    } else {
      swiper.allowSlideNext = true;
      swiper.allowSlidePrev = true;
    }
  });
}

document.addEventListener("DOMContentLoaded", (event) => {
  viewer();
});