initialiser swiper dans reactJS

Question

Je veux utiliser Swiper pour ajouter un slider dans mon application React. Il ne glisse pas correctement. J'ai d'abord installé Swiper avec

npm install Swiper

puis

import Swiper from swiper

J'ai écrit ceci dans la méthode componentDidMount de mon composant

     var swiper = new Swiper('.swiper-container', {
          direction: 'vertical',
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
        });

J'ai ajouté :

    <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
          <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

et j'ai ajouté les styles requis dans un fichier css que j'importe et j'importe le fichier css et js

    import 'swiper/css/swiper.min.css'
    import 'swiper/js/swiper.min.js'

mais le résultat est incorrect. Il montre seulement le slider1 sans aucun style et il ne montre rien. Merci.

Image du curseur