Estoy usando swiper para crear un control deslizante, pero los botones no funcionan. Intenté cambiar el navegador web pero nada cambió.

La extensión del archivo es .php y estoy usando xammp

este es mi código:

js:

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

html:

 <secton class="home"> <div class="swiper home-slider"> <div class="swiper-wrapper"> <div class="swiper-slide slide" style="background:url(1.png) no-repeat"> <div class="content"> <a href="package.php" class="btn">Réserver</a> </div> </div> <div class="swiper-slide slide" style="background:url(3.png) no-repeat"> <div class="content"> <a href="package.php" class="btn">Réserver</a> </div> </div> <div class="swiper-slide slide" style="background:url(3.png) no-repeat"> <div class="content"> <a href="package.php" class="btn">Réserver</a> </div> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </section>

Lo intenté:

 import Swiper, { Navigation } from 'swiper'; Swiper.use([Navigation]);

y:

 import SwiperCore, { Navigation } from 'swiper'; SwiperCore.use([Navigation]);

Usé herramientas de desarrollo y la consola muestra:

 Uncaught ReferenceError: Swiper is not defined <anonymous> http://localhost/website/script.js

después de que agregué:

 import Swiper, { Navigation, Pagination } from 'swiper'; Swiper.use([Navigation, Pagination]);

se vuelve:

 Uncaught SyntaxError: import declarations may only appear at top level of a module