title: Swiper Slider - Infinite loop with multi-row slides
body: <p>I'm using the Swiper by iDangero.us and I'm having difficulty creating an infinite loop of multi-row slides. I have 30 images which I need to group into 3 rows of 5 over 2 slides. Setting <code>loop</code> renders the slides in the grid that I want to achieve and clicking the arrows slides between each one correctly. But I need the slides to be infinite, going back to the original 15 images on the first slide once I reach the end. Setting <code>loop</code> to true breaks this.</p>
  
  <p>What am I doing wrong? Is it possible to do this with this plugin?</p>
  
  <p>Snippet and JSFiddle below.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var swiper = new Swiper('.swiper-container', {
      // loop: true,
      prevButton: '.swiper-button-prev',
      nextButton: '.swiper-button-next',
      slidesPerView: 5,
      spaceBetween: 15,
      slidesPerColumn: 3,
      slidesPerColumnFill: 'row',
      slidesPerGroup: 15
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  
  html,
  body {
      margin: 20px 0;
      padding: 0;
      font-family: Arial, sans-serif;
  }
  
  .container {
      width: 100%;
      max-width: 1170px;
      padding: 0 15px;
      margin: 0 auto;
  }
  
  .img-responsive {
      display: block;
      max-width: 100%;
      height: auto;
  }
  
  .swiper-slide span {
      position: absolute;
      top: 15px;
      left: 15px;
      background-color: black;
      color: white;
      padding: 6px;
      display: block;
      font-size: 20px;
      width: 35px;
      height: 35px;
      text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="swiper-container"&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;script&gt;
                  for (i = 1; i &lt;= 30; i++) {
                      document.write('&lt;div class="swiper-slide"&gt;&lt;img src="http://placehold.it/240x240" class="img-responsive"&gt;&lt;span&gt;' + i + '&lt;/span&gt;&lt;/div&gt;');
                  }
              &lt;/script&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt;
          &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JS Fiddle: <a href="http://codepen.io/aethyrion/pen/mRVwzE" rel="nofollow noreferrer">http://codepen.io/aethyrion/pen/mRVwzE</a></p>