Swiper.js - stop autoplay on hover and start on blur

swiper-autoplay-start-stop.js

const sliderElement = document.querySelector(".main-slider");

if (sliderElement) {
  const slider = new Swiper(".swiper-container", {
    slidesPerView: 1,
    spaceBetween: 0,
    watchOverflow: true,
    loop: true,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false
    },
    pagination: {
      el: ".swiper-pagination"
    }
  });

  ["mouseenter", "mouseleave"].forEach(eventName =>
    sliderElement.addEventListener(
      eventName,
      () => {
        slider.autoplay.running
          ? slider.autoplay.stop()
          : slider.autoplay.start();
      },
      false
    )
  );
}