title: Swiper initialization in React
body: <p>I'm trying to initialize the Swiper library in my React application. It is not swiping correctly.</p>
  
  <p>Initial steps: </p>
  
  <pre><code>npm install swiper
  </code></pre>
  
  <p>Added:</p>
  
  <pre><code>import Swiper from 'swiper'
  </code></pre>
  
  <p>Wrote this in the render method of my component:</p>
  
  <pre><code>var mySwiper = new Swiper (".swiper-container", {
    preloadImages: false,
    lazy: true,
    pagination: ".swiper-pagination",
    paginationClickable: true,
    slidesPerView: 1,
    spaceBetween: 10,
    keyboardControl: true,
    a11y: true,
    nextButton: ".swiper-button-next",
    prevButton: ".swiper-button-prev"
  });
  </code></pre>
  
  <p>Created a CSS file that includes all the properties from: </p>
  
  <blockquote>
    <p>dist/css/swiper.css</p>
  </blockquote>
  
  <pre><code>&lt;div className="swiper-container"&gt;
    &lt;div className="swiper-wrapper"&gt;
  
      &lt;div className="swiper-slide"&gt;Slide 1
      &lt;/div&gt;
      &lt;div className="swiper-slide"&gt;Slide 2
      &lt;/div&gt;               
      &lt;div className="swiper-slide"&gt;Slide 3
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div className="swiper-pagination"&gt;&lt;/div&gt;
    &lt;div className="swiper-button-next"&gt;&lt;/div&gt;
    &lt;div className="swiper-button-prev"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I currently just Slide 1 is showing. And when I click the buttons, nothing moves. The other slides are generating on the right (can see from console), but the swiper is not swiping. Also, if I try an image with lazy load instead of Slide 1, the image is forever stuck on the lazy load spinner.</p>
  
  <p>Just want to know how to fix this.</p>