title: Integration of swiper
body: <p>I am trying to integrate swiper with my website. I am quite new to programming though. I have added the CSS and HTML to my code but I'm not sure how to initialise the swiper. </p>
  
  <p>I have a project called swiper-common.js which contains the following code:</p>
  
  <pre><code> var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              paginationClickable: true,
              autoplay: 3000,
              loop: true,
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              paginationBulletRender: function (index, className) {
                  return '&lt;span class="' + className + '"&gt;&lt;/span&gt;';
              }
          });
  </code></pre>
  
  <p>I guess I need to call this or insert it into the main page I am showing my swiper on. I tried adding</p>
  
  <pre><code>&lt;script&gt;
   var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              paginationClickable: true,
              autoplay: 3000,
              loop: true,
              nextButton: '.swiper-button-next',
              prevButton: '.swiper-button-prev',
              paginationBulletRender: function (index, className) {
                  return '&lt;span class="' + className + '"&gt;&lt;/span&gt;';
              }
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>but I get the following error: 
   JavaScript runtime error: 'Swiper' is undefined.</p>
  
  <p>Everything else in the code works i.e. the styling and the image shown although the next and previous buttons are not functioning nor is the autoplay</p>