[Résolu] Intégration carousel npm swiper js - script ne fonctionne pas

Salut,

j'essaye d'intégrer, un carousel via la librairie Swiper.js et en installant par NPM sans passer par react ou vue js.
https://swiperjs.com/get-started

Mon problème, c'est que je n'arrive pas du tout à faire fonctionner le script.
J'ai repris la doc comme point de départ de mon projet.

J'ai cette erreur : SyntaxError: Cannot use import statement outside a module

Dans mon fichier HTML

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Dans mon fichier css (scss) - Sur ce point je ne sais pas si j'ai bien fait d'intégrer de cette manière. En tout cas la mise en forme et les flèches sont bien apparu....

@use '../../node_modules/swiper/swiper-bundle.css';

Dans mon fichier js

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';

// init Swiper:
const swiper = new Swiper(
  // Optional parameters
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },

);

Modifié par tc-web (10 Apr 2024 - 19:53)

\ô/
comme tu utilises les directives import/export il te faut déclarer test scripts avec le type="module".
Quelque chose comme :

<script type="module" src="nom-fichier-module.js"></script>
<script type="module">
import {ma_variable} from "./nom-fichier-module.js" ;
// utilisation de ma_variable
</script>

ou pas loin !