Custom slider delay pause autoplay

Design help Custom code
1

Hello! I am working on a custom slider in webflow, using Swiper.js. It is working nearly perfecly, but I cannot manage to get the carousel to pause immediately on hover. If I hover on it for a long time, it will eventually stop, and immediately start again on mouseleave.

Any suggestions on how to fix this?
This is my read only link: Webflow - Behold
And the published website: www.b-hold.no

this is my header code:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">


<style>
  .slider-list {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }
</style>

And this is my before body tag code

<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

 <script>
 document.addEventListener("DOMContentLoaded", function () {
  const slider_wrapper = new Swiper(".slider-wrapper", {
    wrapperClass: "slider-list",
    slideClass: "slider-item",
    navigation: {
      nextEl: '.next-slide',
      prevEl: '.prev-slide',
    },
    pagination: {
      type: 'bullets',
      el: '.pagination',
      clickable: true,
    },
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
    speed: 7500,
    slidesPerView: 'auto',
    loop: true,
  });

  const sliderElement = document.querySelector('.slider-wrapper');

  sliderElement.addEventListener('mouseenter', function () {
    slider_wrapper.params.speed = 0;
    slider_wrapper.autoplay.stop();
    slider_wrapper.params.speed = 7500;
  });

  sliderElement.addEventListener('mouseleave', function () {
    slider_wrapper.autoplay.start();
  });
});
    </script>

Any suggestions are welcome and please note I am pretty new to coding :)