(() => {
  // webpackBootstrap
  const { actions } = ShopbySkin;

  const bannerId = document.currentScript.getAttribute('shopby-banner-id');

  if (bannerId) {
    actions?.getBannerById?.({ bannerId });
  }
})();

$(document).ready(() => {
  setTimeout(() => {
    const updateFraction = (swiper) => {
      const current = (swiper.realIndex + 1).toString().padStart(2, '0');
      const total = swiper.slides.length.toString().padStart(2, '0');
      const countLeft = document.querySelector('.curr');
      const countRight = document.querySelector('.max');

      countLeft.textContent = `${current}`;
      countRight.textContent = `${total}`;
    };

    var slideSetting = {
      slidesPerView: 1.504,
      spaceBetween: 20,
      centeredSlides: true,
      loop: true,
      speed: 800,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.mcon01 .swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.mcon01 .swiper-button-next',
        prevEl: '.mcon01 .swiper-button-prev',
      },
      on: {
        init: function () {
          updateFraction(this);
        },
        slideChange: function () {
          updateFraction(this);
        },
      },
    };
    const slide = new Swiper('.mcon01 .swiper', slideSetting);
  }, 500);
});