window.addEventListener('load', function () {
  var progressBar = document.querySelector('.mainSec1 .swiper-progress-bar');
  var currentEl = document.querySelector('.mainSec1 .pagin-current');
  var totalEl = document.querySelector('.mainSec1 .pagin-total');

  var mainSwiper = new Swiper('.mainSec1 .swiper-container', {
    autoplay: { delay: 5000, disableOnInteraction: false },
    speed: 500,
    loop: true,
    navigation: {
      nextEl: '.mainSec1 .swiper-button-next',
      prevEl: '.mainSec1 .swiper-button-prev',
    },
    on: {
      init: function () {
        if (currentEl) currentEl.textContent = this.realIndex + 1;
        if (totalEl) totalEl.textContent = this.slides.length - 2; // loop º¹Á¦º» Á¦¿Ü
        if (progressBar) progressBar.classList.add('active', 'animate');
      },
      slideChangeTransitionStart: function () {
        if (currentEl) currentEl.textContent = this.realIndex + 1;
        if (progressBar) progressBar.classList.remove('animate');
      },
      slideChangeTransitionEnd: function () {
        if (progressBar) progressBar.classList.add('animate');
      },
    },
  });
});