swiper

const swiper = new Swiper(".swiper-post", {
  // Disable preloading of all images
  slidesPerView: 1.2,
  spaceBetween: 15,
  preloadImages: false,
  lazy: {
    loadPrevNext: true,
  },
  centeredSlides: true,
  loop: true,
  keyboard: {
    enabled: true,
    onlyInViewport: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  pagination: {
    el: ".swiper-pagination",
    type: "bullets",
    clickable: true,
  },
  observer: true,
  updateOnWindowResize: true,
  breakpoints: {
    // when window width is >= 640px
    991: {
      slidesPerView: 3,
      centeredSlides: false,
      loop: false,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 25,
      loop: false,
      centeredSlides: false,
    },
    576: {
      slidesPerView: 2,
      centeredSlides: false,
      loop: false,
      spaceBetween: 15,
    },
  },
  on: {
    breakpoint: function () {
      const swiper = this;

      if (swiper.currentBreakpoint == 576) {
        swiper.loopDestroy();
      } else if (swiper.currentBreakpoint == "max") {
        swiper.loopCreate();
      }
    },
  },
});