Lo swipe delle immagini non funziona

[qwerty999]

Non riesco a far funzionare la funzione "swiper" di javascript sul mio sito web. In sostanza clicco sulle frecce ma le immagini invece di scorrere lateralmente non scorrono proprio.
Inoltre c'è anche il problema che il testo sull'immagine che dovrebbe scorrere non si vede.

Potreste aiutarmi per favore?

Vi lascio una parte di file html e js che dovrebbero implementare questa funzione.

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

  <!-- font awesome cdn link  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="css/style.css">

<section class="header">

   <a href="home.html" class="logo">Travel agency</a>

   <nav class="navbar">
      <a href="home.html">home</a>
      <a href="about.html">about</a>
      <a href="package.html">package</a>
      <a href="book.html">book</a>
   </nav>

   <div id="menu-btn" class="fas fa-bars"></div>

</section>

<!-- header section ends -->

<!-- home section starts  -->

<section class="home">

   <div class="swiper home-slider">

      <div class="swiper-wrapper">

         <div class="swiper-slide slide" style="background:url(images/home-slide-1.jpg) no-repeat">
            <div class="content">
               <span>exploreeeeeeeeeeeeeeeeeeeeeeeeeeee, discover, travel</span>
               <h3>travel arround the world</h3>
               <a href="package.html" class="btn">discover more</a>
            </div>
         </div>

         <div class="swiper-slide slide" style="background:url(images/home-slide-2.jpg) no-repeat">
            <div class="content">
               <span>explore, discover, travel</span>
               <h3>discover the new places</h3>
               <a href="package.html" class="btn">discover more</a>
            </div>
         </div>

         <div class="swiper-slide slide" style="background:url(images/home-slide-3.jpg) no-repeat">
            <div class="content">
               <span>explore, discover, travel</span>
               <h3>make your tour worthwhile</h3>
               <a href="package.html" class="btn">discover more</a>
            </div>
         </div>
         
      </div>

      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
  <!-- pagination dots -->
  <div class="swiper-pagination"></div>
   </div>

</section>

<!-- home section ends -->

var swiper = new Swiper(".home-slider", {
   loop:true,
   navigation: {
     nextEl: ".swiper-button-next",
     prevEl: ".swiper-button-prev",
   },
   
   pagination: {
      el: '.swiper-pagination',
  },
});

var swiper = new Swiper(".reviews-slider", {
   grabCursor:true,
   loop:true,
   autoHeight:true,
   spaceBetween: 20,
   breakpoints: {
      0: {
        slidesPerView: 1,
      },
      700: {
        slidesPerView: 2,
      },
      1000: {
        slidesPerView: 3,
      },
   },
});

[abellos]

Ciao,
non conosco quello script, ma nell'html che hai inserito manca proprio l'inserimento del tag script con il js dello swipe, ci sono solo i css

[Dascos]

Se ha senso per il tuo progetto, usa il Carousel di Bootstrap...
https://getbootstrap.com/docs/5.0/components/carousel/

[alka]

Non riesco a far funzionare la funzione "swiper" di javascript sul mio sito web. [...]

Hai controllato con F12 nella Console se vengono riportati o meno messaggi di errore?

[ninja72]

Se nella console leggi "Uncaught ReferenceError: Swiper is not defined" vuol dire che forse manca il file javascript della libreria.

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