giao_dien_web_mau/demo-audio-2/js/main_pc.js

// HOMEAPGE FUNC
function homepageHandler() {
  swiperSectionHero();
  swiperSectionBrand();
  swiperDealList();
}

homepageHandler();

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

function swiperSectionBrand() {
  new Swiper(".swiper-section-banner", {
    spaceBetween: 20,
    slidesPerView: 6,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

function swiperDealList() {
  new Swiper(".swiper-deal-list", {
    direction: 'vertical',
    spaceBetween: 10,
    slidesPerView: 3,
    rewind: true,
    speed: 1000,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
      pauseOnMouseEnter: "true",
    },
  });
}

// PRODUCT DETAIL
// PRODUCT THUMBNAIL
let galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 12,
  slidesPerView: 5,
  slideToClickedSlide: true,
  freeMode: true,
  watchSlidesProgress: true,
  centerInsufficientSlides: true,
});

let galleryTop = new Swiper(".gallery-top", {
  spaceBetween: 12,
  slidesPerView: 1,
  speed: 1000,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
    pauseOnMouseEnter: "true",
  },
  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();
      }
    },
  },
});

// FANCY-BOX
$('[data-fancybox="gallery"]').fancybox({
  thumbs: {
    autoStart: true
  }
});