title: initialize swiper in reactJS
body: <p>i want to use Swiper for add slider in my React application. It is not swiping correctly.
  at first i install swiper with</p>
  
  <pre class="lang-sh prettyprint-override"><code>npm install Swiper
  </code></pre>
  
  <p>then </p>
  
  <pre class="lang-js prettyprint-override"><code>import Swiper from swiper
  </code></pre>
  
  <p>Wrote this in the componentDidMount method of my component</p>
  
  <pre class="lang-js prettyprint-override"><code>     var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
          });
  </code></pre>
  
  <p>I added:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="swiper-container"&gt;
          &lt;div class="swiper-wrapper"&gt;
            &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 4&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 5&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 6&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 7&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 8&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 9&lt;/div&gt;
            &lt;div class="swiper-slide"&gt;Slide 10&lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Add Pagination --&gt;
          &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>and I added require styles in a css file that I import them and I import css and js file </p>
  
  <pre class="lang-js prettyprint-override"><code>    import 'swiper/css/swiper.min.css'
      import 'swiper/js/swiper.min.js'
  </code></pre>
  
  <p>but the result is incorrect. It shows just slider1 without any style and it doesn't show anything. Thank you.</p>
  
  <p><a href="https://i.stack.imgur.com/kjenf.png" rel="nofollow noreferrer">Slider Image</a></p>