I am trying to get an effect in my Elementor slider but not able to get it. when you check the reference site you would notice that there is no navigation arrows on the slider but ASAP mouse hove the slider, mouser courser becomes the arrows Right & Left arrow.
I am trying the same but did not able to find the related widget/plugin for my site, also I am getting an annoying vertical Scroll in my page.

What I Tried: I have tried the custom CSS and JS which I got from Chat GPT, but it is not working as I want.

CSS Code

.elementor-swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0; /* Initially hide arrows */
    transition: opacity 0.3s ease;
  }
  
  .slider-container:hover .elementor-swiper-button {
    opacity: 1; /* Show arrows on hover */
  }

JS Code

<script>
  // Example JavaScript to track mouse movement
  const sliderArrows = document.querySelector('.slider-arrows');

  document.addEventListener('mousemove', (event) => {
    // Update arrow position based on mouse coordinates
    const x = event.clientX;
    const y = event.clientY;
    sliderArrows.style.left = `${x}px`;
    sliderArrows.style.top = `${y}px`;
  });
</script>

What I want: I want the same slider mouse effect and no vertical-scroll.

Any help will be appreciated.