mjchemi/js/common.js

  $(function(){
    $("header .header--bottom .header--contents").on("mouseenter", function(e){
      if(e.type == "mouseenter"){
        $("header, .header--menu--dim").addClass("actv");
      }
    });

    $(".header--line--banner--wrap .close--btn").on("click", function(){
      $(".header--line--banner--wrap").addClass("actv");
      $("main").addClass("actv");
    });

    $(".header--menu--dim, .header--top").on("mouseenter", function(e){
      if(e.type == "mouseenter"){
        $("header, .header--menu--dim").removeClass("actv");
      }
    })
    $("header").on("mouseleave", function(){
      $("header").removeClass("actv");
    });

    const swiper = new Swiper('.main--visual', {
      loop: true,
      // autoplay: {
      //   delay: 5000,
      //   disableOnInteraction: false,
      // },
      pagination: {
        el: '.main--visual--fraction',
        type: "fraction",
        formatFractionCurrent: function (number) {
          return number.toString().padStart(2, '0');
        },
        formatFractionTotal: function (number) {
          return number.toString().padStart(2, '0');
        }
      },
      navigation: {
        nextEl: ".prev--next--wrap .next--btn",
        prevEl: ".prev--next--wrap .prev--btn",
      },
      on: {
        slideChange: function () {
          // 동그라미 pagination 수동 업데이트
          const bullets = document.querySelectorAll('.main--visual--pagination .swiper-pagination-bullet');
          bullets.forEach((bullet, index) => {
            bullet.classList.remove('swiper-pagination-bullet-active');
            if (index === this.realIndex) {
              bullet.classList.add('swiper-pagination-bullet-active');
            }
          });
          
          // progress bar 업데이트
          const totalSlides = this.slides.length;
          const currentIndex = this.realIndex;
          const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
          const progressBar = document.querySelector('.main--visual--progress .progress-bar');
          const progressText = document.querySelector('.main--visual--progress .progress-text');
          
          if (progressBar) {
            progressBar.style.background = `linear-gradient(to right, #fff ${progressPercent}%, rgba(255,255,255,0.3) ${progressPercent}%)`;
          }
          if (progressText) {
            progressText.textContent = `${(currentIndex + 1).toString().padStart(2, '0')}`;
          }
        },
        init: function () {
          // 초기 동그라미 pagination 생성
          const totalSlides = this.slides.length;
          const paginationContainer = document.querySelector('.main--visual--pagination');
          paginationContainer.innerHTML = '';
          
          for (let i = 0; i < totalSlides; i++) {
            const bullet = document.createElement('span');
            bullet.className = 'swiper-pagination-bullet';
            if (i === 0) bullet.classList.add('swiper-pagination-bullet-active');
            bullet.addEventListener('click', () => {
              this.slideToLoop(i);
            });
            paginationContainer.appendChild(bullet);
          }
          
          // 초기 progress bar 설정
          const progressBar = document.querySelector('.main--visual--progress .progress-bar');
          const progressText = document.querySelector('.main--visual--progress .progress-text');
          
          if (progressBar) {
            progressBar.style.background = `linear-gradient(to right, #fff 50%, rgba(255,255,255,0.3) 50%)`;
          }
          if (progressText) {
            progressText.textContent = `01`;
          }
        }
      }      
    });

    const swiper2 = new Swiper('.prof--swiper.pc', {            
      loop: true,
      slidesPerView: "auto",
      spaceBetween: 30,
      navigation: {
        nextEl: ".prof--swiper--action .btn--wrap .next--btn",
        prevEl: ".prof--swiper--action .btn--wrap .prev--btn",
      },
    });

    const swiper3 = new Swiper('.prof--swiper.mo', {            
      loop: true,
      slidesPerView: 1,
      spaceBetween: 15,
      navigation: {
        nextEl: ".prof--swiper--action .btn--wrap .next--btn",
        prevEl: ".prof--swiper--action .btn--wrap .prev--btn",
      },
    });

    const swiper4 = new Swiper('.prof--man--swiper', {            
      loop: true,      
      spaceBetween: 30,
      slidesPerView: "auto",
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".nav--wrapper .next--btn",
        prevEl: ".nav--wrapper .prev--btn",
      },
    });

    // Swiper 정지/재생 버튼 이벤트 처리
    $(".nav--wrapper .pause--btn").on("click", function(){
      swiper4.autoplay.stop();
      $(".nav--wrapper .pause--btn").hide();
      $(".nav--wrapper .play--btn").show();
    });

    $(".nav--wrapper .play--btn").on("click", function(){
      swiper4.autoplay.start();
      $(".nav--wrapper .play--btn").hide();
      $(".nav--wrapper .pause--btn").show();
    });

    $(window).on("scroll", function(){
      if($(window).scrollTop() > 50){
        $(".top--btn").addClass("actv");
      }else{
        $(".top--btn").removeClass("actv");
      }
    })

    $(".top--btn").on("click",function(){
      $(window).scrollTop(0);
    });

    $(".gnb--wrap").on("mouseenter mouseleave", function(e){      
      if(e.type == "mouseenter"){
        $(this).addClass("actv");
        $(".header--dim").addClass("actv");
      }else{
        $(this).removeClass("actv");
        $(".header--dim").removeClass("actv");
      }      
    });

    // FAQ 아코디언 기능    
    
    $(".faq--item--title").on("click", function(){
      const $content = $(this).siblings(".faq--item--content");
      const $otherContents = $(".faq--item--content").not($content);
      
      // 다른 항목들 닫기
      $otherContents.slideUp(300);

      $(".faq--item--title").not(this).removeClass("active");
      
      // 클릭한 항목 토글
      $content.slideToggle(300);
      $(this).toggleClass("active");
    });

  });