$(function(){
  const progressLine = document.querySelector('.autoplay-progress svg')
  let swiper = new Swiper('#mainVisual', {
    slidesPerView : 1,
    spaceBetween : 0,
    slidesPerGroup : 1,
    loop: true,
    autoplay:{
      delay: 6000, // 시간 설정
    },
    navigation: {
           nextEl: ".visual-button-next",
           prevEl: ".visual-button-prev",
    },
    pagination : {   // 페이저 버튼 사용자 설정
      el : '.swiper-pagination',  // 페이저 버튼을 담을 태그 설정
      clickable : true,  // 버튼 클릭 여부
      type : 'fraction', // 버튼 모양 결정 "bullets", "fraction" 
      formatFractionCurrent: function (number) {
        return ('0' + number).slice(-2);
      },
      formatFractionTotal: function (number) {
          return ('0' + number).slice(-2);
      },
      renderFraction: function (currentClass) {
          return '<span class="' + currentClass + '"></span>';
      }
    },
    on: {
      autoplayTimeLeft(s, time, progress) {
          progressLine.style.setProperty("--progress", 1 - progress)
      }
    },
    breakpoints:{
      280: {
            //280px 이하의 크기에서 옵션 값 
        },
        768 : {
          //768px 이하의 크기에서 옵션 값 
        },
        1024 : {
            //1024px 이하의 크기에서 옵션 값 
        }
    }
  
  })
})