title: Owl Carousel two rows issue
body: <p>Im using Owl Carousel with Wordpress and it's loading dynamic content with the help of a WP loop.
  Here is the loop code:</p>
  
  <pre><code>&lt;?php
      $args = array(
          'post_type' =&gt; 'properties',
          'posts_per_page' =&gt; -1,
          'paged' =&gt; $paged
      );
  
      $the_query = new WP_Query($args);
  ?&gt;
  
  &lt;?php
      $i = 1;
      //added before to ensure it gets opened
      echo '&lt;div class="item-wrapper"&gt;';
      if (have_posts()):
          while ($the_query-&gt;have_posts()):
              $the_query-&gt;the_post();
  ?&gt;  
  
  &lt;div class="item"&gt;
      &lt;img class="img-responsive img-rounded" src="&lt;?php the_field('property_foto');?&gt;" alt="AWF Property Example" /&gt;
  &lt;/div&gt;
  
  &lt;?php
              if ($i % 2 == 0) {
                  echo '&lt;/div&gt;&lt;div class="item-wrapper"&gt;';
              } // if multiple of 3 close div and open a new div
              $i++;
          endwhile;
      endif;
      //make sure open div is closed
      echo '&lt;/div&gt;';
  ?&gt;
  </code></pre>
  
  <p>and my JS for the Carousel:</p>
  
  <pre><code>$(document).ready(function(){
      $("#owl-properties").owlCarousel({
          nav: true,
          pagination: true,
          loop: true,
          dots: false,
          autoplay: false,
          autoplayTimeout:2000,
          autoplayHoverPause:true,
          navText: [
                "&lt;span class='glyphicon glyphicon-chevron-left'&gt;&lt;/span&gt;",
                "&lt;span class='glyphicon glyphicon-chevron-right'&gt;&lt;/span&gt;"
            ],
          margin:10,
          responsiveClass:true,
          responsive:{
              0:{
                  items:2,
              },
              450:{
                  items:3,
              },
              767:{
                  items:4,
              },
              991:{
                  items:5,
              },
              1199:{
                  items:5,
              }
          } 
      });
  });
  </code></pre>
  
  <p>I've added some code to the loop in order to echo div's every two items, this way I create two rows. However, at the end of all the items, it spits out an empty <code>&lt;div class="item-wrapper"&gt;&lt;/div&gt;</code> which causes to display an empty column without any images. </p>
  
  <p>What is wrong in my code? Would be great if anybody could help me out!</p>
  
  <p>Thanks! </p>