How to fix Swiper Slider navigation (arrows) problem

[vekgithubb]

Why Swiper Slider navigation (arrows) don't work correct (have conflict) in my WordPress website?
I use Swiper Slider on my WordPress website. All code (html, js and css) is converted to a shortcode with a code snippet plugin. Everything is working fine and the slider is fine, but there is one problem! The problem is that the arrows or navigations are not showing properly and I want to fix it.

<link rel="stylesheet" href=".../swiper/swiper-bundle.min.css" />
<script src=".../swiper/swiper-bundle.min.js"></script>

<!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#" rel="noopener"><img src=".../slider/s11.webp" /></a></div>
        <div class="swiper-slide"><a href="#" rel="noopener"><img src=".../slider/s22.webp" /></a></div>
        <div class="swiper-slide"><a href="#" rel="noopener"><img src=".../slider/s33.webp" /></a></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      centeredSlides: true,
      loop: true,
      effect: "fade",
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  </script>

<style>
    .swiper {
      width: 100%;
      height: auto;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: block;
      justify-content: center;
      align-items: center;
      border-radius: 0;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 0;
    }
    
</style>

you can see slider in my website from below link
http://bit.ly/3GAjVQN
(and I show you this problem with red arrows in the picture).

When I put the codes in the html file, it works properly, but when I put it in my WordPress site, it doesn't work properly.