du_an_khach_hang/Maychuchinhhang/js/main_pc.js

$(document).ready(function () {
  // GLOBAL CALL
  globalHandler();

  // PAGE CALL
  homepageHandler();
  categoryHandler();
  productDetailHandler();

});


// 
// 
function globalHandler() {
  swiperBannerHeaderTop();
}

function swiperBannerHeaderTop() {
  new Swiper(".swiper-banner-header-top", {
    slidesPerView: 1,
    spaceBetween: 0,
    rewind: true,
    speed: 1000,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

// 
// 
function homepageHandler() {
  swiperSectionHero();
  swiperSectionBestSeller();
  swiperSectionCollection();
}

// SWIPER SECTION HERO
function swiperSectionHero() {
  new Swiper(".swiper-section-hero", {
    slidesPerView: 1,
    spaceBetween: 0,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

function swiperSectionBestSeller() {
  new Swiper(".swiper-section-best-seller", {
    slidesPerView: 4,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

function swiperSectionCollection() {
  new Swiper(".swiper-section-collection", {
    slidesPerView: 5,
    spaceBetween: 12,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

// 
//
function categoryHandler() {

}

// 
// 
function productDetailHandler() {
  swiperSectionRelativeProduct();
  hoverGalleryThumbs();
  ratingHover();
  if (window.screen.availWidth > 576) $('[data-fancybox="gallery"]').fancybox({ thumbs: { autoStart: true } });
}

function swiperSectionRelativeProduct() {
  new Swiper(".swiper-relative-product", {
    slidesPerView: 5,
    spaceBetween: 10,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
}

function hoverGalleryThumbs() {
  $('.gallery-thumbs .swiper-slide-hover').on('mouseover', function () {
    galleryTop.slideTo($(this).index());
  })
  // $('.gallery-thumbs .swiper-slide').on('click', function () {
  //   let srcImg = $(this).find('img').attr('src');
  //   $(`[data-fancybox="gallery"][href="${srcImg}"]`).click();
  // })
}

let galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 10,
  slidesPerView: 1,
  direction: 'vertical',
  slideToClickedSlide: true,
  freeMode: true,
  watchSlidesProgress: true,
  centerInsufficientSlides: true,
  allowTouchMove: false
});

let galleryTop = new Swiper(".gallery-top", {
  spaceBetween: 0,
  slidesPerView: 1,
  speed: 1000,
  thumbs: {
    swiper: galleryThumbs,
  },
  // AUTO SILDED AT FISRT AND END
  on: {
    slideChange: function () {
      let activeIndex = this.activeIndex + 1;

      let activeSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex})`
      );
      let nextSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex + 1})`
      );
      let prevSlide = document.querySelector(
        `.gallery-thumbs .swiper-slide:nth-child(${activeIndex - 1})`
      );

      if (
        nextSlide &&
        !nextSlide.classList.contains("swiper-slide-visible")
      ) {
        this.thumbs.swiper.slideNext();
      } else if (
        prevSlide &&
        !prevSlide.classList.contains("swiper-slide-visible")
      ) {
        this.thumbs.swiper.slidePrev();
      }
    },
  },
});

// FUNC REVIEW FORM
function showReviewForm() {
  $(".js-form-review").fadeIn();
  $(".rate-riview-right a").attr("href", "javascript:hideReviewForm()");
  $(".rate-riview-right a").html("Đóng lại !");
  $(".rate-riview-right a").addClass("close-btt")
}

function hideReviewForm() {
  $(".js-form-review").fadeOut();
  $(".rate-riview-right a").attr("href", "javascript:showReviewForm()");
  $(".rate-riview-right a").html("Gửi đánh giá của bạn ");
  $(".rate-riview-right a").removeClass("close-btt")
}