mjchemi/js/common.js

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

    $(".header--contents").on("mouseenter", function(){
       $(this).addClass("actv");
    })
    $(".header--contents").on("mouseleave", function(){
      $(this).removeClass("actv");
    });

    $(".ham--btn").on("click", function(){
      $(".header--ham--wrap").addClass("actv");
    });

    $(".header--ham--wrap .ico--close").on("click", function(){
      $(".header--ham--wrap").removeClass("actv");
    });

    $('.ham--l li').each(function (index) {
      $(this).on('click', function () {
        $('.ham--l li').removeClass('actv');
        $(this).addClass('actv');

        $('.ham--r ul').removeClass('actv');
        $('.ham--r ul').eq(index).addClass('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');
        },
        renderFraction: function (currentClass, totalClass) {
          return '<span class="' + currentClass + '"></span>' +
                 '<span class="fraction-separator"></span>' +
                 '<span class="' + totalClass + '"></span>';
        }
      },
      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');
          const progressTitle = document.querySelector('.main--visual--progress .progress-title');
          
          if (progressBar) {
            progressBar.style.background = `linear-gradient(to right, #fff ${progressPercent}%, rgba(0,0,0,0.2) ${progressPercent}%)`;
          }
          if (progressText) {
            progressText.textContent = `${(currentIndex + 1).toString().padStart(2, '0')}`;
          }
          if (progressTitle && this.slideTitles && this.slideTitles[currentIndex]) {
            progressTitle.textContent = this.slideTitles[currentIndex];
          }
        },
        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');
          const progressTitle = document.querySelector('.main--visual--progress .progress-title');
          
          if (progressBar) {
            progressBar.style.background = `linear-gradient(to right, #fff 50%, rgba(255,255,255,0.3) 50%)`;
          }
          if (progressText) {
            progressText.textContent = `01`;
          }
          
          // 각 슬라이드의 제목 가져오기
          const slideTitles = [];
          this.slides.forEach(slide => {
            const titleElement = slide.querySelector('.main--visual--txt .sub--title');
            if (titleElement) {
              slideTitles.push(titleElement.textContent);
            }
          });
          
          // 첫 번째 슬라이드 제목 설정
          if (progressTitle && slideTitles.length > 0) {
            progressTitle.textContent = slideTitles[0];
          }
          
          // 슬라이드 제목 배열을 swiper 인스턴스에 저장
          this.slideTitles = slideTitles;
        }
      }      
    });

    const swiper2 = new Swiper('.reason--swiper', {            
      loop: true,
      slidesPerView: 5,
      spaceBetween: 40,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".reason--swiper .btn--wrap .next--btn",
        prevEl: ".reason--swiper .btn--wrap .prev--btn",
      },
      breakpoints: {
        0: {
          slidesPerView: 1.1,
        },
        501: {
          slidesPerView: 1.5,
        },
        768: {
          slidesPerView: 2,
        },
        1001: {
          slidesPerView: 3,
          spaceBetween: 20,
        },
        1401: {
          slidesPerView: 4,
          spaceBetween: 30,
        },
        1801: {
          slidesPerView: 5,
          spaceBetween: 40,
        }
      }
    });

    // play/pause 버튼 기능
    $(".reason--swiper .btn--wrap .play--btn").on("click", function(){
      if($(this).hasClass("pause")){
        // 현재 일시정지 상태이면 재생
        swiper2.autoplay.start();
        $(this).removeClass("pause");
      } else {
        // 현재 재생 상태이면 일시정지
        swiper2.autoplay.stop();
        $(this).addClass("pause");
      }
    });

    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);
    });

    // 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");
    });

  });