Trying to use swiper js with npm but I can not( Pure JS

I want to use swiper js for my project and I want to install it using npm. Many times there were errors with the installation, but after fixing the errors there were no errors, but the slider did not work. Before this I installed it using a cdn file and everything worked, but I want to use npm. Help please, I’ve been sitting all day trying to do this.

Here’s my code:

import Swiper from "swiper";
import "../node_modules/swiper/swiper.css";
import "../node_modules/swiper/modules/navigation.css";
import { Navigation } from "swiper/modules";
const controlMain = async function () {
  await model.setDefault();
  document.querySelector(".main-spinner").classList.add("active");

  const topAuthorsMarkup = `
  <section class="top-authors">
  <h2 class="heading-secondary">Top authors</h2>
  <!-- Список слайдов -->
  <div class="swiper top-authors__list">
    <div class="swiper-wrapper">
      ${model.state.default.topAuthorsNames
        .map((authorName, i) => {
          return `
        <div class="swiper-slide top-authors__item">
          <figure class="top-authors__author">
            <img class="top-authors__img"
                 src="${model.state.default.topAuthorsImgs[i]}"
                 alt="${authorName} image" />
            <figcaption class="top-authors__description">
              <h3 class="top-authors__name">${authorName}</h3>
              <p class="top-authors__text">
                ${model.state.default.topAuthorsDescription[i]}
              </p>
            </figcaption>
            <a class="top-authors__link" href="#"></a>
          </figure>
        </div>
      `;
        })
        .join("")}
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</section>
`

Here’s video